webpack笔记
1、webpack的安装和使用
一、webpack
模块化打包工具
二、安装webpack
2.1 先全局安装
cnpm install webpack -g
cnpm install webpack-cli -g
cnpm i webpack webpack-cli -g
2.2 测试版本
webpack -v
webpack-cli -v cli是脚手架的内容
三、简单用一下webpack
webpack==》本身之前是打包js
如果要打包:html 、css ... 需要借助cli,添加一些配置文件
1. 进入项目目录,在src文件夹下创建index.js文件
src/index.js
2. 在该目录中下载webpack
cnpm install webpack -S
3. 在终端执行:webpack,就会打包成功
打包好的文件放在dist/main.js中,没有空格换行注释等
2、webpack的入口和输出
一、入口文件:指示webpack使用哪个模块
默认:src/index.js
二、出口文件
默认:dist/main.js
3、多文件的打包
一、多文件打包成一个文件 ,使用数组
问题:多个入口文件 ===》 单文件出口
解决:entry: ['./src/a.js','./src/b.js']
二、多文件打包成多文件 ,使用对象
问题:多个入口文件 ===》 多文件出口
解决:entry: {
a:'./src/a.js',
b:'./src/b.js'
},
4、loader工具的使用
一、loader是什么
webpack本身只能理解 JavaScript 和 JSON 文件,不支持css等其他类型的文件:
loader 可以让 webpack 能够去处理其他类型的文件(比如html,css),并将它们转换为有效模块,以供应用程序使用,以及被添加到依赖图中。
如果不进行以下配置,webpack是打包js的,不支持css,会报错
二、loader的配置
写法:
module: {
rules: [{
test: /\.css$/,
use: ['style-loader','css-loader']
}]
}
1、test 属性,识别出哪些文件会被转换。如:test: /\.css$/
2、use 属性,定义出在进行转换时,应该使用哪个 loader。
****一定要记住下载loader
下载举例:
cnpm install style-loader css-loader -s
webpack中的loader有哪些?(非常多)
sass.loader
html.loader
file.loader
ts.loader等
5、html打包
插件:html-webpack-plugin
***参考网站:https://www.cnblogs.com/wonyun/p/6030090.html
补充:cnpm install
根据package.json中的依赖项,进行全部的下载,不需要一个一个install
使用步骤:
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:'index.html'
4.3 允许注入到模板中的chunk
chunks:['jquery','xx']
4.4 不允许注入到模板中的thunk
excludeChunks:['xx']
5. 多页面打包
需要创建多个new HtmlWebpackPlugin
6、在html中加入图片
一、加载图片的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'
}
***loader只需要配置,插件需要引入(例如html-webpack-plugin)
7、在html中加入字体图标
添加字体图标的配置:
{
test: /\.(eot|svg|ttf|woff|woff2)$/,
use: 'file-loader?name=./fonts/[name].[ext]'
}
8、CSS打包
压缩打包css
1. 单独抽离css文件
1.1 下载插件: mini-css-extract-plugin
1.2 引入插件:
var MiniCssExtractPlugin = require('mini-css-extract-plugin');
1.3 修改loader:将style.loader换掉
{
test: /\.css$/,
use: [MiniCssExtractPlugin.loader,'css-loader']
}
1.4 使用插件
plugins:[
new MiniCssExtractPlugin()
]
2. 压缩css文件
插件: optimize-css-assets-webpack-plugin
9、应用案例:项目压缩打包
步骤1:在demo文件夹中新建src文件夹,将要压缩的文件全部放入src文件夹
步骤2:将每个页面中引入css和js的语句去掉,并在对应的js文件中的进行配置
举例:在index.html对应的index.js文件中,写如下语句:
注意:每个页面都要进行步骤2,配置好自己的js文件,对html文件进行简化。
步骤3:修改webpack.config.js文件
var path = require('path');
var webpack = require('webpack');//引入webpack,解决$无法识别的问题
var HtmlWebpackPlugin = require('html-webpack-plugin');//引入html插件
var MiniCssExtractPlugin = require('mini-css-extract-plugin');//引入css插件
var OptimizeCssAssetsWebpackPlugin= require('optimize-css-assets-webpack-plugin');//压缩css
module.exports = {
entry: {
//引入每一个页面的js文件
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',
//引入额外需要的js文件
jquery:'./src/js/jquery-1.11.min.js',
swiper:'./src/js/swiper-bundle.min.js',
popup:'./src/js/jquery.popup.min.js'
},
output: {//生成的输出文件,放在dist文件夹中
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [
{ //css
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]'
},
{//html
test: /\.html$/,
use: 'html-withimg-loader'
}]
},
plugins: [
//解决$符号无法识别的问题
new webpack.ProvidePlugin({
$:'jquery',
jQuery:'jquery',
'window.jQuery':'jquery'
}),
//有几个页面,就new几个HtmlWebpackPlugin
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()
]
};
注意:有几个页面,就new 几个 HtmlWebpackPlugin,每一个页面都要进行配置。