webpack

一、省略安装npm install XXX -g

1、入口entry
2、输出output
3、loader
可以让webpack处理非JS文件，可以让所有类型的文件转换为webpack有效处理的模块
4、plugins(插件)
打包优化、压缩、定义环境变量、使用a、需要reauire.b、plugins添加

二、webpack命令使用

webpack --config XXX.js //使用另一份配置文件（比如webpack.config2.js）来打包
 webpack --watch //监听变动并自动打包
 webpack -p//压缩混淆脚本，这个非常非常重要！ 
webpack -d//生成map映射文件，告知哪些模块被最终打包到哪里了

三、报错

css加载不出来的时候或者报错的时候（ERROR Module not found: Error: Cannot resolve module ‘style’ in D:\workspace\HBuilder React_Probject\webPack-demo1\webpck\app）
执行下面命令：

$npm i style-loader -D
$npm i css-loader -D

四、文件配置

1、package.json文件里的script

"scripts": {
    "start": "node dev-serve.js"
  },

const path = require('path'); //引入path
module.exports = {
    mode: 'development',
    entry: {
        index: path.join(__dirname, 'src/index.js'),
        signup:path.join(__dirname, 'src/signup.js'),
    },

   output: {
        publicPath:'/dist', // 必须加publicPath
        path: __dirname + './dist',
        filename: 'bundle.js'
    },
    
   devServer: {
        host: 'localhost',  // 访问地址
        port: '8080',  // 访问端口
        open: true, // 自动拉起浏览器
        hot: true // 热加载
    },
 plugins: [
        new webpack.HotModuleReplacementPlugin()  // 热更新插件
    ]
}

热更新必须有以下几点：
引入webpack
output里加publicPath
devServer中增加hot:true
在plugins中配置 new webpack.HotModuleReplacementPlugin()