webpack从零开始构建react应用(二)

在(一)中，只是简单的搭建了一个webpack的架子，接下来使用web-dev-server 与 html-webpack-plugin 来完成html模板的自动生成，与热加载

1.web-dev-server 安装

npm install web-dev-server --save-dev

2.在webpack.config.js中添加devServer

 devServer:{
    contentBase : path.resolve(__dirname,'dist'),        //配置要监听的目录，使用绝对路径
    host:"localhost" ,//服务器地址
    compress: true,  //开启服务器压缩
    port:8100  //端口
}

3.启用webpack-dev-server 命令

在package.json的scripts中添加如下代码
"scripts": {
  "server": "webpack-dev-server"
}
因为webpack-dev-server没有全局安装，没办法直接在控制台使用这个命令，
这个时候就可以通过npm run server 来运行

4.访问localhost:8100 来查看效果

最新的webpack是默认支持热加载的，只要修改一个index.js就能不刷新页面看到效果了

5.html-webpack-plugin插件使用

npm install html-webpack-plugin --save-dev
这是一个根据html模板自动生成html的插件，因为每次打包出来的js都一个命名的话，浏览器会优先
加载缓存文件，导致不能用到最新的js,所以一般都会在js后面带上一个hash值，但是这样会产生一个
问题，每次打包之后，都要手动的修改<script src></script>中src的值；这个插件就可以帮我们快速
生成；

6.在webpack.config.js中添加配置

const HtmlPlugin = require('html-webpack-plugin');
plugins:[
    new HtmlPlugin({
        minify:{
            removeAttributeQuotes:true    //去除属性引号。。。
        },
        hash:true,  //js缓存去除
        template: './src/index.html'
    })
]
在src中创建index.html模板
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
</body>
</html>

7. npm run server

查看localhost:8100 目录结构

截图.png

8. 完成webpack.config.js

const path = require("path");
const HtmlPlugin = require('html-webpack-plugin');

module.exports = {
    entry:{
        index:["./src/index.js"]
    },
    output:{
        path:path.resolve(__dirname,"dist"),
        filename:"bundle.js"
    },
    plugins:[
        new HtmlPlugin({
            minify:{
                removeAttributeQuotes:true    //去除属性引号。。。
            },
            hash:true,  //js缓存去除
            template: './src/index.html'
        })
    ],
    devServer:{
        contentBase : path.resolve(__dirname,'dist'),        //配置要监听的目录
        host:"localhost" ,//服务器地址
        compress: true,  //开启服务器压缩
        port:8100
    }
}

最简单的架子已经搭建好了，包含了：html自动生成，项目热加载；
后面就开始搞react了！

github链接地址: https://github.com/zhujunwei/react_webpack

最后编辑于：2018.01.16 20:45:58