写本记时（2018-06-25）的各版本

"webpack": "^4.6.0"  //可直接使用4x以上的开发模式，刷新很快

"webpack-dev-server": "^3.1.4"   //当天安装

"html-webpack-plugin": "^3.2.0", //当天安装

如果要使用es6,先看其它教程安装好babel，这里主要记录基于html-webpack-plugin的多页面配置

 

html-webpack-plugin 的配置

首先装好html-webpack-plugin，在webpack.config.js 配置2个入口文件，和滤镜中2个出口文件（即生成2个页面）

注意入口配置的键名前面加目录，打包之后js会按路径存放 或者在出口的filename右边加个目录也可以

const path = require('path')const HtmlWebpackPlugin = require('html-webpack-plugin')const MiniCssExtractPlugin = require("mini-css-extract-plugin") //配置项module.exports = {    entry : {        'index' : __dirname + '/src/index.js',        'main' : __dirname + '/src/main.js',        'jqueryv183min' :__dirname + '/src/jqueryv183min.js'    },    output:{        path: __dirname + '/dist',        filename:'js/[name].js',        publicPath:'/',    },    devServer:{        contentBase:path.resolve(__dirname,'./src'),        host:'localhost',        compress:false,        port:8100,        hot:false    },    module:{        rules:[            {                test: /.js$/,                loader: 'babel-loader?presets=es2015',            },            {                test: /\.(htm|html)$/i,                loader: 'html-withimg-loader'            },            {                test:/\.(jpg|png|gif|svg)$/,                //小于1024的图片都用base64的方式加载                loader: 'url-loader',                options: {                    limit: 1024,                      outputPath:'images/'                }            },            {                test: /\.css$/,                loader:[MiniCssExtractPlugin.loader,'css-loader']            }        ]    },    plugins:[    new HtmlWebpackPlugin({        template: __dirname + "/src/index.html",        filename:'index.html',        title:'哈哈',        chunks:['jqueryv183min','index'],        //按上面的chunks数组顺序来插入js文件        chunksSortMode: 'manual',        minify:true, 　　　　　hash:true //这样资源扩展名后面会增加hash值     }),    new HtmlWebpackPlugin({        template: __dirname + "/src/main.html",        filename:'main.html',        title:'嘿嘿',        chunks:['main'],        chunksSortMode: 'manual'    }),    new MiniCssExtractPlugin({        filename: "css/[name].css",        chunkFilename: "[id].css"    })    ]}

 

打包命令：webpack

关于打包后的各种文件路径：

在出口配置里添加一项publicPath:'/'，即html模板中的所有资源引用路径，css中的图片路径，打包之后所有相对路径都会替换成这个路径，所以注意开发时的路径配置

关于html-webpack-plugins中chunks块的排序：

加入chunksSortMode: 'manual',  (记得修改了webpack.config.js要重新启动dev,开发模式下才能即时生效)

 

 

webapck-dev-server配置：

---

 

devServer:{        contentBase:path.resolve(__dirname,'./src'),        host:'localhost',        compress:false,        port:8100,        hot:false    },

 

 

关于webpack 4.x以上的开发模式（快速自动刷新）

---

 在package.json里面script中加入一条：

"dev": "webpack-dev-server  --mode  development",

然后运行cnpm run dev

 

 

html中显示图片，打包到文件夹

---

首先安装file-loader、url-loader、(url-loader内置了file-loader) html-withimg-loader(这个好像不能安装在dev下？) 

在module:{rules[]}中加入2个规则：

{    test: /\.(htm|html)$/i,    loader: 'html-withimg-loader'},{    test:/\.(jpg|png|gif|svg)$/,    //小于1024的图片都用base64的方式加载    loader: 'url-loader',    options: {        limit: 1024,         outputPath:'images/'    }}

 

 

以模块方式加载css文件，抽离为css文件独立打包

---

旧的是用extract-text-webpack-plugin，而4.0以上已经废弃，使用mini-css-extract-plugin

首先安装 cnpm i style-loader css-loader mini-css-extract-plugin --save-dev

要在入口文件中引入css文件(只能以这个方式引入css,并且html-webpack-plugin会自动加载？)：import idxcss from './css/base.css'

规则中添加

{    test: /\.css$/,    loader:[MiniCssExtractPlugin.loader,'css-loader']}

滤镜中添加

new MiniCssExtractPlugin({        filename: "css/[name].[chunkhash:8].css",        chunkFilename: "[id].css"    })

这样css中的图片也会被打包到css目录 

 

清空打包目录clean-webpack-plugin

---

 

安装插件  clean-webpack-plugin

const cleanWebpackPlugin = require('clean-webpack-plugin')new cleanWebpackPlugin(    ['dist/*.*','dist/css/*.*','dist/js/*.*'],　 //匹配删除的文件    {        root: __dirname,       　　　　　　　　　　//根目录        verbose:  true,        　　　　　　　　　　//开启在控制台输出信息        dry:      false        　　　　　　　　　　//启用删除文件    })//注，上面要匹配文件的方式来写，不可直接写一个dist目录 //网上很多不负责的文章，就直接扔一个dist进去

 

 复制静态文件

---

 

当有一些不参与打包的文件时，使用此插件：copy-webpack-plugin

const CopyWebpackPlugin=require('copy-webpack-plugin');new CopyWebpackPlugin([{    from: __dirname + '/src/static',    to: __dirname + '/dist/static'            }])

 

 

启用静态http服务器查看打包效果

---

 

为了统一各种静态资源的路径，在出口配置中加入publicPathc :'/' ，所有相对路径资源都会转换成根目录路径

这时，全局安装cnpm i -g http-server，进入打包目录 执行 http-server ，即可启动静态http服务器