安装个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']}
]
}
}