安装个webpack4.x真是要了我半条老命,花了几天时间,看了n个教程才搞定。。。
话不多说,接下来说下webpack4.x的安装步骤,最好用cnpm命令,用npm执行的话有时会有莫名其妙的错误
1、打开cmd,切换到项目根目录,然后执行初始化命令npm init -y
2、执行cnpm i webpack -D
3、在项目根目录手动创建src
源代码目录和dist
产品目录,在 src 目录下创建 index.html
4、执行cnpm i webpack webpack-cli -D
5、在根目录下新建一个webpack.config.js
文件,配置如下内容:
module.exports={
mode: 'production',//production || development
}
6、执行webpack-v
就可以看到安装的版本号了
7、还没完,为了实现页面实时刷新而不是手动刷新,需要执行cnpm i webpack-dev-server -D
,并在package.json中新增“dev”内容:
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack-dev-server --open firefox --port 3000 --hot --host 127.0.0.1"
},
8、到这个时候基本完成了webpack的配置,执行npm run dev
,就可以实时编译刷新页面了。
9、为了实现每次实时编译后打开的就是index.html页面,需要执行cnpm i html-webpack-plugin -D
,并打开webpack.config.js
配置如下内容:
const path=require('path')
const HtmlWebPackPlugin=require('html-webpack-plugin')//导入在内存中自动生成index页面插件
//创建内存中的index页面
const htmlPlugin=new HtmlWebPackPlugin({
template: path.join(__dirname,'./src/index.html'),
filename:'index.html'
})
//向外暴露一个大包配置对象
module.exports={
mode: 'production',//production || development
plugins:[
htmlPlugin
]
}
10、完成后执行npm run dev
默认打开的就是内存中的index.html页面,而不是src中的页面了。
11、为了让webpack能编译css、less、scss三种文件,需要安装几个loader
12、执行cnpm i style-loader css-loader -D
,然后在webpack.config.js
中新增如下内容
const path=require('path')
const HtmlWebPackPlugin=require('html-webpack-plugin')//导入在内存中自动生成index页面插件
//创建内存中的index页面
const htmlPlugin=new HtmlWebPackPlugin({
template: path.join(__dirname,'./src/index.html'),
filename:'index.html'
})
//向外暴露一个大包配置对象
module.exports={
mode: 'production',//production || development
plugins:[
htmlPlugin
],
module:{
rules:[
{test: /\.css$/, use:['style-loader','css-loader']}
]
}
}
13、执行cnpm i less-loader -D
和cnpm i less -D
,并在webpack.config.js`中新增如下内容:
const path=require('path')
const HtmlWebPackPlugin=require('html-webpack-plugin')//导入在内存中自动生成index页面插件
//创建内存中的index页面
const htmlPlugin=new HtmlWebPackPlugin({
template: path.join(__dirname,'./src/index.html'),
filename:'index.html'
})
//向外暴露一个大包配置对象
module.exports={
mode: 'production',//production || development
plugins:[
htmlPlugin
],
module:{
rules:[
{test: /\.css$/, use:['style-loader','css-loader']},
{test: /\.less$/, use:['style-loader','css-loader','less-loader']}
]
}
}
14、终于到最后一步了,执行cnpm i sass-loader -D
和cnpm i node-sass -D
,在webpack.config.js`中新增如下内容:
const path=require('path')
const HtmlWebPackPlugin=require('html-webpack-plugin')//导入在内存中自动生成index页面插件
//创建内存中的index页面
const htmlPlugin=new HtmlWebPackPlugin({
template: path.join(__dirname,'./src/index.html'),
filename:'index.html'
})
//向外暴露一个大包配置对象
module.exports={
mode: 'production',//production || development
plugins:[
htmlPlugin
],
module:{
rules:[
{test: /\.css$/, use:['style-loader','css-loader']},
{test: /\.less$/, use:['style-loader','css-loader','less-loader']},
{test: /\.scss$/, use:['style-loader','css-loader','sass-loader']}
]
}
}