一、webpack
模块化打包工具
二、安装webpack
2.1 先全局安装
cnpm install webpack -g
cnpm install webpack-cli -g
2.2 测试版本
webpack -v
webpack-cli -v
三、简单用一下webpack
webpack==》本身之前是打包js
如果要打包：html 、css ... 需要借助一些东西
1. 进入项目目录，随便创建一个js文件
src/index.js
2. 在该目录中下载webpack
cnpm install webpack -S
3. 在终端执行:webpack命名就会打包成功
一、入口
默认：src/index.js
二、出口
默认：dist/main.js
********************************************************************
默认配置
var path = require('path');
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'main.js',
},
};一、多文件打包成一个文件
问题：多个入口文件 ===》 单文件出口
解决：entry: ['./src/a.js','./src/b.js']
二、多文件打包成多文件
问题：多个入口文件 ===》 多文件出口
解决：entry: {
a:'./src/a.js',
b:'./src/b.js'
}
一、loader是什么
webpack 只能理解 JavaScript 和 JSON 文件，这是 webpack 开箱可用的自带能力。loader 让 webpack 能够去处理其他类型的文件，并将它们转换为有效 模块，以供应用程序使用，以及被添加到依赖图中。
二、loader的配置
写法：
module: {
rules: [{
test: /\.css$/,
use: ['style-loader','css-loader']
}]
}1、test 属性，识别出哪些文件会被转换。
2、use 属性，定义出在进行转换时，应该使用哪个 loader。
****一定要记住下载loader
==================================================
插件：html-webpack-plugin
***参考网站：https://www.cnblogs.com/wonyun/p/6030090.html
使用步骤：
1. 下载
cnpm install html-webpack-plugin -S
2. 引入
var HtmlWebpackPlugin = require('html-webpack-plugin');
3. 配置
plugins: [
new HtmlWebpackPlugin()
]
4. 参数说明
4.1 指定模版页面
template:'./src/index.html'
4.2 修改默认输出文件名
filename:'xx.html'
4.3 允许插入到模板中的一些chunk
chunks:['jquery','xx']
4.4 配置不允许注入的thunk
excludeChunks:['xx']
5. 多页面打包
需要创建多个new HtmlWebpackPlugin
一、加载图片的loader ==> file-loader
{
test: /\.(png|jpg|jpeg|gif)$/,
use: [{
loader:'file-loader',
options:{
esModule:false,
outputPath:'img/'
}
}]
}二、让html支持图片的loader ==> html-withimg-loader
{
test: /\.html$/,
use: 'html-withimg-loader'
}var path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: {
index:'./src/index.js',
jquery:'./src/jquery.js',
xx:'./src/xx.js'
},
output: {
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [{
test: /\.css$/,
use: ['style-loader','css-loader']
},
{
test: /\.(png|jpg|jpeg|gif)$/,
use: [{
loader:'file-loader',
options:{
esModule:false,
outputPath:'img/'
}
}]
},
{
test: /\.html$/,
use: 'html-withimg-loader'
}]
},
plugins: [
new HtmlWebpackPlugin({
//指定模版页面
template:'./src/index.html',
//修改默认输出文件名
filename:'index.html',
//配置不允许注入
excludeChunks:['xx']
}),
new HtmlWebpackPlugin({
//指定模版页面
template:'./src/xx.html',
//修改默认输出文件名
filename:'xx.html',
chunks:['jquery','xx']
})
]
};添加字体图标：
{
test: /\.(eot|svg|ttf|woff|woff2)$/,
use: 'file-loader?name=./fonts/[name].[ext]'
}压缩打包css
1. 单独抽离css文件
1.1 下载插件： mini-css-extract-plugin
1.2 引入插件：
var MiniCssExtractPlugin = require('mini-css-extract-plugin');
1.3 修改loader：
{
test: /\.css$/,
use: [MiniCssExtractPlugin.loader,'css-loader']
}1.4 使用插件
plugins:[
new MiniCssExtractPlugin()
]================》
//分离css
new MiniCssExtractPlugin({
filename:'./css/[name].css',
}),2. 压缩css文件
插件： optimize-css-assets-webpack-plugin
plugins:[
//压缩css
new OptimizeCssAssetsWebpackPlugin()
]var path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var MiniCssExtractPlugin = require('mini-css-extract-plugin');
var OptimizeCssAssetsWebpackPlugin= require('optimize-css-assets-webpack-plugin');
module.exports = {
entry: {
index:'./src/index.js',
jquery:'./src/jquery.js',
xx:'./src/xx.js'
},
output: {
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [
{
test: /\.css$/,
use: [MiniCssExtractPlugin.loader,'css-loader']
},
{
test: /\.(png|jpg|jpeg|gif)$/,
use: [{
loader:'file-loader',
options:{
esModule:false,
outputPath:'img/'
}
}]
},
{
test: /\.(eot|svg|ttf|woff|woff2)$/,
use: 'file-loader?name=./fonts/[name].[ext]'
},
{
test: /\.html$/,
use: 'html-withimg-loader'
}]
},
plugins: [
new HtmlWebpackPlugin({
//指定模版页面
template:'./src/index.html',
//修改默认输出文件名
filename:'index.html',
//配置不允许注入
excludeChunks:['xx']
}),
new HtmlWebpackPlugin({
//指定模版页面
template:'./src/xx.html',
//修改默认输出文件名
filename:'xx.html',
chunks:['jquery','xx']
}),
//分离css
new MiniCssExtractPlugin({
filename:'./css/[name].css',
}),
//压缩css
new OptimizeCssAssetsWebpackPlugin()
]
};===================================
项目打包的步骤----------自写版
1、以index.html为例，把index.html中引入的css、js文件全部删除了，然后创建index.js文件
import '../css/style.css'......引入css文件
。。。。。。。。。。。。。。。。。。。。。具体不描述
var path = require('path');
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var MiniCssExtractPlugin = require('mini-css-extract-plugin');
var OptimizeCssAssetsWebpackPlugin= require('optimize-css-assets-webpack-plugin');
module.exports = {
entry: {
index:'./src/js/index.js',
about:'./src/js/about.js',
curriculum:'./src/js/curriculum.js',
product:'./src/js/product.js',
student:'./src/js/student.js',
jquery:'./src/js/jquery-1.11.min.js',
swiper:'./src/js/swiper-bundle.min.js',
popup:'./src/js/jquery.popup.min.js'
},
output: {
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [
{
test: /\.css$/,
use: [MiniCssExtractPlugin.loader,'css-loader']
},
{
test: /\.(png|jpg|jpeg|gif)$/,
use: [{
loader:'file-loader',
options:{
esModule:false,
outputPath:'img/'
}
}]
},
{
test: /\.(eot|svg|ttf|woff|woff2)$/,
use: 'file-loader?name=./fonts/[name].[ext]'
},
{
test: /\.html$/,
use: 'html-withimg-loader'
}]
},
plugins: [
new webpack.ProvidePlugin({
$:'jquery',
jQuery:'jquery',
'window.jQuery':'jquery'
}),
new HtmlWebpackPlugin({
//指定模版页面
template:'./src/index.html',
//修改默认输出文件名
filename:'index.html',
chunks:['index','jquery','swiper','popup']
}),
new HtmlWebpackPlugin({
//指定模版页面
template:'./src/about.html',
//修改默认输出文件名
filename:'about.html',
chunks:['about','jquery']
}),
new HtmlWebpackPlugin({
//指定模版页面
template:'./src/curriculum.html',
//修改默认输出文件名
filename:'curriculum.html',
chunks:['curriculum','jquery','swiper']
}),
new HtmlWebpackPlugin({
//指定模版页面
template:'./src/product.html',
//修改默认输出文件名
filename:'product.html',
chunks:['product']
}),
new HtmlWebpackPlugin({
//指定模版页面
template:'./src/student.html',
//修改默认输出文件名
filename:'student.html',
chunks:['student','jquery']
}),
//分离css
new MiniCssExtractPlugin({
filename:'./css/[name].css',
}),
//压缩css
new OptimizeCssAssetsWebpackPlugin()
]
};相关作者
- 获取点赞0
- 文章阅读量264
评论（）