从零学习搭建webpack工程（二）

传送门： 从零学习搭建webpack工程(一)

4、打包html，以及html-webpack-plugin的详细配置

一、安装plugin npm install -D html-webpack-plugin

package.json中：

"devDependencies": {
   "clean-webpack-plugin": "^3.0.0",
   "html-webpack-plugin": "^3.2.0",
   "webpack": "^4.41.2",
   "webpack-cli": "^3.3.10"
 },
复制代码

二、在webpack.config.js中引入

const HtmlWebpackPlugin = require('html-webpack-plugin')
复制代码

三、在plugins中配置(我这里配置的是两个页面index和list)

此处用到了两个模板页面，须要先在根目录下新建两个文件index.html和list.html

new HtmlWebpackPlugin({
           title: "webpack template",
           template: "./index.html",
           filename: "index/index.html"
       }),
       new HtmlWebpackPlugin({
           title: "webpack template",
           template: "./list.html",
           filename: "list/list.html",
           chunks: ['list']//引入的js
       })
复制代码

四、执行命令 nom run dev,打包后的文件以下

五、关于html-webpack-plugin的详细参数配置

new HtmlWebpackPlugin({
            title: "webpack template",//在html使用ejs语法时生效
            template: "./list.html",
            filename: "list/list.html",
            chunks: ['list'],//容许注入的js文件
            excludeChunks: ['index'],// 阻止注入某些js文件
            inject: "body",//（true | body）添加静态资源在body底部 | head添加静态资源在head  | false阻止添加静态资源
            favicon: "",//值是一个路径，在生成的html中生成一个favicon
            minify: false,//默认值是false，是否对生成的html进行压缩
            hash: true,//默认值是false，清楚缓存， 添加一个hash值在包含的脚本和css中
            cache: true,//默认是true，内容变化时造成新的文件
            showErrors: true,// 默认是true,错误信息输出到html文件中
            meta: {} //值是对象，设置元信息。
        })
复制代码

5、配置webpack-dev-serve,进行热更新

一、安装webpack-dev-serve ,命令 npm install webpack-dev-serve -D

二、在webpack.config.js中配置devServer

三、devServe参数配置详解

devServer: {
        contentBase: path.join(__dirname, "dist"),//项目的目录
        host: "localhost",//ip
        port: 2020,//端口
        open: true,//自动打开浏览器
        hot: true,//开启热替换
        // useLocalIp: true,
        openPage: "index/index.html",
        compress: true,//gzip压缩
        //header:{ }//设置响应头，
        overlay: true,//编译失败，在浏览器显示错误
        //stats: 'errors-only',//编译时命令行打印的内容 可选值 'minimal', 'normal', 'verbose'
        proxy: {//跨域
            '/api': {
                target: '', // 目标接口的域名
                // secure: true,  // https 的时候 使用该参数
                changeOrigin: true,  // 是否跨域
                pathRewrite: {
                    '^/api': ''  // 重写路径
                }
            }
        }
    },
复制代码

四、修改package.json 下的script

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server --config webpack.config.js",
    "build": "webpack --config webpack.config.js"
  },
复制代码

五、命令npm run dev 会启动node服务，自动打开浏览器页面

传送门： 从零学习搭建webpack工程(一)