此文章适合小白，仅为个人总结
1、安装node，配置环境变量，新版node安装时会默认配置好环境变量
2、全局安装webpack4，webpack4需要配合webpack-cli使用，全局安装webpack-cli
命令：npm install -g webpack //全局安装webpack；npm install -g webpack-cli //全局安装webpack-cli
3，新建项目文件夹webpack1（名字自己起），进入文件夹，shift+鼠标右键，打开命令窗口，执行npm init，一路回车即可，执行完后会新增一个package.json文件
4、继续输入命令安装webpack和webpack局部依赖包，npm install –save-dev webpack；npm install –save-dev webpack-cli //把webpack-cli安装到devDependencies
安装完成后此时的目录结构和packjson的内容
image
5、安装 各个模块：
npm install style-loader css-loader –save-dev //打包css style
npm install extract-text-webpack-plugin –save-dev //打包css style wepack4.0一下版本
npm install mini-css-extract-plugin –save-dev // //打包css style wepack4.0一下版本
npm install optimize-css-assets-webpack-plugin –save-dev //压缩css
npm install –save-dev sass-loader //打包scss
//因为sass-loader依赖于node-sass，所以还要安装node-sass
npm install –save-dev node-sass
npm install url-loader file-loader img-loader –save-dev //url-loader file-loader用于打包css中的图片，img-loader用于图片压缩
npm install html-webpack-plugin –save-dev //打包html文件
此时package.json如下：
image
6.在webpack下新建目录src，并在src建立相应的资源目录，login.html不需要引入js和css文件，打包自动引入。目录图如下：
image
login.js中引入login.scss
require ("../style/login.scss");
7、在webpack1中新建webpack.config.js,粘贴一下代码：
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry:{
login:__dirname + '/src/js/login.js',//多入口配置
},
output:{
path: path.resolve(__dirname, './build'),//打包后的文件存放的地方 会在wepack1下生成build目录
filename: 'js/[name].js', //js文件会生成在build/js下
},
module: {
rules: [
{
test: /\.scss$/, // 正则表达式，表示.css后缀的文件
use: ['style-loader','css-loader','sass-loader'] // 针对scss文件使用的loader，注意有先后顺序，数组项越靠后越先执行
},
{ test: /\.(jpg|png|gif|bmp|jpeg)$/,//正则表达式匹配图片规则
use: [{
loader:'url-loader',
options:{
publicPath: '/webpack/build/',
limit:8192,//限制打包图片的大小：
//如果大于或等于8192Byte，则按照相应的文件名和路径打包图片；如果小于8192Byte，则将图片转成base64格式的字符串。
name:'image/[name].[ext]',//css中的images图片将会打包在build/image下;
}
}]
},
]
},
//插件
plugins:[
new HtmlWebpackPlugin({
title:"登陆", //生成的html title名字，在模板文件中用 <title><%= htmlWebpackPlugin.options.title %></title>调用即可
chunks:['login'], //引入entry中的key名字的js文件，此处为login，打包后html后会自动引入login.js文件
filename: 'login.html', // bulid目录下生成的html文件名
template: 'src/html/login.html' // 我们原来的index.html路径，作为模板
})
]
};
8.更改package.json,更改打包命令：添加start
scripts": {
"start": "webpack",
"test": "echo \"Error: no test specified\" && exit 1"
}
9.在webpack下打开命令窗口，执行 npm start即可。
10、打包html中的img图片
当html中有img时，我们需要将src改成require路径。
<img src="<%= require('../res/image/boelogo.png')%>" alt="picture" class="boelogoimg">
