虽然项目已经搭建成功，但是，我现在愿意重新走一次来帮自己和大家捋顺一点。
基本篇——打包成功第一个文件
1.新建一个文件，在当前目录下执行
npm init然后一直回车：
可以发现，当前目录下多了一个 package.json 的文件，文件里面自动生成以下代码：
{
"name": "demo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}至此，项目初始化完成
2.执行
npm install会发现当前目录下多了一个node_modules
3.安装项目依赖
npm install webpack --save-dev4.新建一个文件 webpack.config.js，之后的配置基本都写在这个文件中。
现在，我们在目录下新建一个 src 文件夹，存放我们开发所需要的页面，src下面建立 page1目录，表示 page1 页面， page2 同理。
page1 下面的 index.html 如下
项目目录结构如下：
接下来，我们想分别以这两个页面为入口文件进行打包
为了使webpack启动方便，我们在package.json 中写以下代码：
"webpack": "webpack --config webpack.config.js --progress --display-modules --colors --display-reason"如下图：
然后在webpack.config.js中写以下代码：
const HtmlWebpackPlugin = require('html-webpack-plugin'); //引入插件，不可漏掉！！！
module.exports = {
entry: {
page1 : __dirname + '/src/page1/index.js',// page1的入口文件，webpack是以js为入口文件的
page2 : __dirname + '/src/page2/index.js',
},
output : {
path : __dirname + '/dist',//产出路径，一般放在dist目录下
filename:'js/[name]-[chunkhash].js',
//把为入口文件放在dist目录的js文件夹下，
//name是文件名，chunkhash是每次打包文件的hash值，
//目的是如果哪个文件修改，chunkhash会改变，可以只上线修改过的文件
// publicPath: 'http://cdn.com/' //如果上线，可以改为线上地址
},
plugins: [
new HtmlWebpackPlugin({
filename : 'page1.html',//入口html
template : './src/page1/index.html',
minify : {
// removeComments:true, //删除注释
// collapseWhitespace: true //删除空格，压缩
},
chunks: ['page1'] //对应entry的入口js.这样可以按需加载js
}),
new HtmlWebpackPlugin({
filename : 'page2.html',
template : './src/page2/index.html',
minify : {
// removeComments:true, //删除注释
// collapseWhitespace: true //删除空格，压缩
},
chunks: ['page2']
}),
],
}
然后安装相应的插件
npm install webpack-cli --save-dev
npm install html-webpack-plugin --save-dev在命令窗口运行 npm run webpack 可以看到文件在进行打包，dist目录下生成的文件
至此，初步打包基本完成~
我们看一下生成的文件
这里的 page1 只引用了 page1 的 js，这是因为我们配置 HtmlWebpackPlugin 的时候为其加了 chunks，我们的代码里面也写了备注，大家可留意学习。
应用篇——配置本地启动的服务器localhost，处理scss，css，图片等资源
我们知道文件可以打包成功后，接下来配置启动本地服务器，这样就可以在文件做出修改的时候页面自动刷新，不需要每次修改都重新打包编译了。
配置本地服务器
1. 在 package.json 下面配置如下代码
"start": "node_modules/.bin/webpack-dev-server",
"dev": "webpack --mode development"放在以下位置：
2. 在 webpack.config.js 引入 path
const path = require('path');3. 在 webpack.config.js 配置 devServer
devServer: {
host : '127.0.0.1',
port : 8088 ,
inline : true,
open :true, //自动打开浏览器
hot : false, //慎用！打开热更新，会导致修改样式可能不支持。关闭热更新，页面会强刷
contentBase : path.join(__dirname, "dist"),
},下面依旧告诉大家要放的位置
运行方式：
首先，运行
npm run dev然后，运行
npm run start可以看到浏览器自动帮我们打开了页面
然后修改代码保存，就会发现浏览器自动刷新了修改的内容。
例如，现在打开 page1.html 如下：
我们此时修改 page1 下 index.html 的内容：
此时，保存发现浏览器自动更新到了我们要的效果。
注意：此时修改 html 文件和 js 文件都生效了，但是 css 还没生效，这是因为我们还没写处理 css 的插件。另外，修改 webpack.config.js 文件和 package.json 需要重新执行 npm run start
处理CSS,SCSS文件类型
至此，html，css，js 只有 css 还没生效，我们来看怎么处理 css 文件
1.分别建立 css 文件 和 scss 文件，我们还是以 page1 为例
然后，在 index.css 下面给 body 添加背景颜色：
body{
background-color:red;
}在 test.scss 问价下写如下样式：
body {
margin: 50px;
div {
display: flex;
}
}上面讲过，webpack 的入口文件是 js,所以在 index.js 引入这两个 css 文件
2. 在 index.js 引入这两个 css 文件
3. 配置 webpack.config.js
module: {
rules: [
{ test: /\.(css|scss)$/,
use: [
{loader : "style-loader"},
{loader : 'css-loader?importLoaders=2',
options: {
minimize: true //css压缩
}
},
{ loader : 'postcss-loader',
options: {
plugins:function(){
return [
require('autoprefixer')({
browsers: ["last 5 versions"]
}), //添加浏览器前缀
];
}
}
},
{ loader : "sass-loader", }],
exclude: /node_modules/
},
],
},还是给大家看一下放的位置
红色框标记的是用到的插件，一个一个安装：
npm install --save-dev css-loader style-loader
npm install sass-loader node-sass --save-dev
npm install postcss-cli autoprefixer简单讲一下，postcss 是预处理，其中 autoprefixer 是自动添加浏览器前缀，比如 我们的 test.scss 文件里面写了
display:flex会自动转化为：
scss-loader 顾名思义，就是把 scss 转化为 css
其他如果大家想做进一步了解，可参考资料 处理 css 文件 loader 的详解
处理图片资源
{ test : /\.(png|jpg|gif)$/,use: [
{ loader : 'url-loader', //此处使用url-loader可进行base64，使用file-loader不能
options : {
limit : 20000,
name : 'image/[name]-[hash:5].[ext]',
}
},
{ loader : 'image-webpack-loader' }
]},写在处理 css 资源的同级
注意：在html 引用图片使用以下方式
<img src="${require('../img/jd.png')}" alt="">安装插件
npm install image-webpack-loader
npm install url-loader其中， url-loader 和 file-loader 的区别代码可参考代码注释
image-webpack-loader 的作用是对图片进行压缩