一、安装
1.生成项目配置文件—package.json
npm init
2.全局安装
npm install webpack webpack-cli -g
ps:
webpack:做的事情是,分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Scss,TypeScript等),并将其打包为合适的格式以供浏览器使用。
3.项目下安装
npm install webpack webpack-cli --save-dev
ps:即,先在全局装一次,以后每次在项目下再装一次。
"–save-dev"的缩写为“-D”
而”–save“的缩写为”-S“—
会把这两个模块以及这两个模块依赖的其他模块都装在node_modules里
4.查看版本号确认安装成功
webpack -v
webpack-cli -v
二、使用
1.在项目下创建src文件夹,放项目的源代码,如index.js文件
/src/index.js
console.log("111")
2.在终端运行
webpack
会自动读取src文件夹下的index.js进行打包,生成新文件夹—dist,dist文件夹中有打包后行成的main.js文件。
package.json文件里的
"main": "index.js"
规定项目的入口文件为index.js
三、配置
1.新建配置文件webpack.config
webpack.config.js其实是一个一个配置文件,这个配置文件其实也是一个简单的JavaScript模块,我们可以把所有的与打包相关的信息放在里面,规定如何打包。
webpack.config文件外层是
module.exports = {
}
2.规定入口
module.exports = {
//单入口
entry: 'src/index.js'
//或多入口配置
entry: {
myhome: path.resolve(__dirname, "src/home/main.js"),
myabout: path.resolve(__dirname, "src/about/main.js")
}
}
3.规定出口
module.exports = {
entry: './src/index.js',
//单出口
output: {
path: __dirname+ '/dist',//打包好的文件存放的路径
filename: 'myindex.js'//打包文件名
}
//多出口配置
output:{
//输出的路径,用了Node语法
path:path.resolve(__dirname,'dist'),
//输出的文件名称
filename:'[name].js' //filename:"[name].js"//多入口对应的多出口 。 出口文件名字:[name]是一种关键字 代表入口文件的名字,多入口文件名字没有写就默认为main [hash:6]代表生成哈希值,6代表保留6位
}
};
单入口时[name]关键字默认为main,多入口时[name]关键字为文件名(属性名)。
[hash:6]代表生成哈希值,6代表保留6位,可使相同的文件使用不同的名字,保证每次去服务器请求都能拿到文件(即使是相同的文件)。
可在dist目录下创建前端项目,直接引用打包好的文件
/dist/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="myindex.js"></script>
<title>Document</title>
</head>
<body>
</body>
</html>
4.使用加载器
通过使用不同的loader, 将所有类型的文件,转换为应用程序的依赖图(和最终的 bundle)可以直接引用的模块----帮我们解析node读不懂的某些文件。
为了加载css文件,需要先安装
cnpm install --save-dev style-loader css-loader mini-css-extract-plugin
其中
a: css-loader只是帮我们解析了css文件里面的css代码,
b: 而style-loader就是帮我们直接将css-loader解析后的内容挂载到html页面当中,
c: mini-css-extract-plugin为插件
为了加载文件(图片,视频等),需要先安装
npm install --save-dev file-loader
图片有两种引入途径:1).js中img标签的src,2).css中background-image的url
module: {
rules: [
{test: /\.css$/, use: ['style-loader', 'css-loader']},
{test: /\.(png|svg|jpg|gif)$/,use: ['file-loader']},
]
},
5.使用插件
使用步骤
(1)下载
(2)用require引入
(3)在module.exports中的plugin字段中暴露出来
- mini-css-extract-plugin
mini-css-extract-plugin按照遇到了.css结尾的文件就会启动MiniCssExtractPlugin去加载css文件按照css的link的方式挂载 然后启动css-loader去加载css编码。使用时将style-loader换成MiniCssExtractPlugin.loader即可
//下载
cnpm install --save-dev mini-css-extract-plugin
//引入
const MiniCssExtractPlugin=require("mini-css-extract-plugin")
//插件
plugins:[new MiniCssExtractPlugin({filename:'./dist/css/[hash:6].css'})]
//加载器
module: {rules: [{test: /\.css$/,use: [ MiniCssExtractPlugin.loader,'css-loader']]}
module: {
rules: [
// {test: /\.css$/, use: ['style-loader', 'css-loader']},
{test: /\.(png|svg|jpg|gif)$/,use: ['file-loader']},
{test: /\.css$/,use: [ MiniCssExtractPlugin.loader,'css-loader']}
]
},
plugins:[new MiniCssExtractPlugin({filename:'[name][hash:6].css'})]
使用时切记,如果有多个css文件,打包后的文件名不能相同
2.html-webpack-plugin
- 为html文件中引入的外部资源如script、link动态添加每次compile后的hash,防止引用缓存的外部文件问题
- 可以生成创建html入口文件,比如单页面可以生成一个html文件入口,配置N个html-webpack-plugin可以生成N个页面入口
//下载
cnpm install --save-dev html-webpack-plugin
//引入
const path = require('path');
//插件
plugins: [
new HtmlWebpackPlugin({
hash:true, //为所有包含的脚本和CSS文件附加唯一的编译哈希,这对缓存清除很有用
filename: 'index.html', //输出的html的文件名称
template: './src/index.html', //html模板所在的文件路径
inject: 'body', //引入js的位置:引入js的位置: 'head'-头部引入 'body'/true--</body>之前引入 false不引入
minify: { //压缩项配置
removeComments: true, //是否清除HTML注释 默认false
collapseWhitespace: true, //是否去除空格,默认false
removeScriptTypeAttributes: true, //删除script的类型属性,在h5下面script的type默认值:text/javascript 默认值false
removeStyleLinkTypeAttributes: true, //删除style的类型属性, type="text/css" 同上
minifyJS: false, //是否压缩html里的css(使用clean-css进行的压缩) 默认值false;
minifyCSS: true //是否压缩html里的js(使用uglify-js进行的压缩)
}
})
]
3.clean-webpack-plugin
修改js文件后,不用手动删除旧的打包好的文件,直接打包,会自动删除上一次的
//下载
cnpm install clean-webpack-plugin --save-dev
//引入
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
//插件
plugins: [
new CleanWebpackPlugin()
]
四、开启观察模式
观察文件是否更新,如果文件更新,则代码每次修改后会自动打包
使用webpack --watch代替webpack命令进行打包,原文件修改完毕,会自动打包,手动刷新页面可以看到修改后的样式
五、webpack服务器
虽然webpack提供了webpack --watch的命令来动态监听文件的改变并实时打包,输出新bundle.js文件,这样文件多了之后打包速度会很慢,此外这样的打包的方式不能做到hot replace热更新,即每次webpack编译之后,你还需要手动刷新浏览器。
webpack-dev-server其中部分功能就能克服上面的2个问题。webpack-dev-server主要是启动了一个使用express的Http服务器。它的作用主要是用来伺服资源文件。此外这个Http服务器和client使用了websocket通讯协议,原始文件作出改动后,webpack-dev-server会实时的编译,但是最后的编译的文件并没有输出到目标文件夹。
ps:启动webpack-dev-server后,在目标文件夹中是看不到编译后的文件的,实时编译后的文件都保存到了内存当中。
//下载
cnpm install --save-dev webpack-dev-server
//配置
module.exports = {
entry: {
app: './src/index.js',
print: './src/app.js'
},
+ devServer: {
+ contentBase:'./dist',
+ host: 'localhost',
+ compress: true,
+ // inline: true,
+ port: 8080,
+ open: true,
+ hot: true
+ },
.........
};
//添加一个 script 脚本,可以直接运行开发服务器(dev server)
//package.json下
{
+ "dev": "webpack-dev-server --open --inline --progress --config webpack.config.js",
+ "start": "npm run dev"
}
之后就可以通过npm run dev命令来打开服务器,此时,在源文件修改的样式保存后,页面会自动刷新并进行显示(只有第一次修改浏览器会自动刷新,之后修改都需要手动刷新浏览器)