webpack笔记（持续更新）

__dirname
注："__dirname"是node.js中的一个全局变量，它指向当前执行脚本所在的目录
path.join(__dirname, '..')

这句代码是从当前目录 向上层找文件

创建一个node应用需要用 npm init 初始化一个package.json文件

webpack安装

//全局安装webpack 可以在任意文件夹内使用webpack命令
npm install webpack webpack-cli -g 
//还可以安装webpack到局部项目中
npm install webpack webpack-cli --save-dev

安装到局部 如果使用用npx webpack -v 查看局部webpack的版本号

这种局部安装的方式可以在多个项目中使用多种版本去构建项目，
各个项目都用自己的版本不会发生冲突

webpack配置

使用 webpack [filename] 如果目录下没有 webpack.confg.js文件就会按照默认的打包方式进行打包

如果使用指定的webpack配置打包 需要在执行目录下新建一个
webpack.config.js 文件 webpack打包时默认会加载这个文件 在文件中配置打包规则就可以了

plugin 执行的时刻

plugin的作用是当文件全部Loader处理完打包完 然后进行对文件处理

经常用的两种打包插件

• HtmlWebpackPlugin({teplate:’/src/index.html’})

该插件是将打包好的文件引入到 index.html 这个宿主文件中

• CleanWebpackPlugin([‘dist’])

该插件打包前会清空 ‘dist’ 目录的所有文件再生成打包文件

配置多个输入点

module.exports = {
    entry: {
        app:"./src/js/index.js",
        main:"./src/js/index.js"
    },　　　　//模块的入口文件
    output: {
        filename: "[name].js",      //打包后输出文件的文件名
        path: __dirname + '/dist'   //打包后的文件存放的地方;注："__dirname"是node.js中的一个全局变量，它指向当前执行脚本所在的目录。
    }
};

• 配置多个输入点会在’dist’目录下输出 app.js main.js文件

配置devTool

• mode: ‘development’
  首先 使用开发模式 然后配置devTools

在webpack 开发模式下 可以配置 devTools来生成sourceMap
来提高打包效率 比如可以配置只取去生成 自己写的逻辑代码的sourceMap 不去打包第三方库中的sourceMap
可以提升打包效率

• 比如使用 inline-cheap-source-map 将sourceMap合并到输出文件里面 （这种方式不打包 modules 第三方库里面sourceMap）

• source-map 或者使用这种方式 会在输出目录里面生成 .map 这样的文件 source-map打包方式效率比较低

配置webpack-dev-server

devServer: {
    //打包后的目录
  contentBase: path.join(__dirname, "dist"),
  compress: true,
  open:true,自动打开浏览器
  port: 9000 //容器端口,
  hot:true,启动热替换方式
  hotOnly:true
}

可以使用该种方式去 构建一个web容器将打包后的内容加载到内存
实现热部署的方式 每次改变源文件 都会重新编译 然后重新刷新浏览器

这种方式有N多配置 详情可以在官网上去配置

https://www.webpackjs.com/configuration/dev-server/#devserver-compress

启动方式 必须使用webpack-dev-server启动打包（启动之前别忘 npm install webpack-dev-server -g ）

还可以使用node编码的方式去使用webpack

• webpack中热替换方式

webpack 热替换方式需要在 devServer配置里面去配置 hot:true
和 hotonly:true

devServer: {
  hot:true,启动热替换方式
  hotOnly:true
}

引用热替换插件

plugins:[
    new webpack.HotMdouleReplacementPlugin()
]

• （使用热替换方式 如果你改变了css文件里面的样式 不用去刷新浏览器就能看到改变的效果）

• (如果热替换去检测js 需要实现代码去检测那个改变的文件
  如果文件改变 会执行回调函数然后可以做相应的热更新操作)

if(module.hot){
    module.hot.accept("./number" , ()=>{
        这里为回调函数当number文件发生改变会触发该回调
        然后开发者可以在回调里实现热更新操作
    })
}