webpack知识点下

十六、自动编译打包运行

1)安装

cnpm install webpack-dev-server -D

2）代码

devServer:{
        open:true,//在浏览器中开发项目
        openPage:"home.html",//默认会打开index.html文件，但是我们更改为home.html，所以要指定
        host:"127.0.0.1",//设置打开的地址
        port:"8000",//设置打开的端口号
        
}

 npx webpack-dev-server

1)第一种方法:npx webpack serve

npx webpack serve

地址一定要改好

这种方式是打包在内存中的，而不是指定的位置

2)第二种方式：把webpack-cli的版本向下拉

cnpm i webpack-cli@3 -D

然后执行命令

 npx  webpack-dev-server

也可以无需手动刷新页面,会自动刷新页面就可以看到变化

compress: true, // 启动gzip压缩

十七、开启热模块

模块热替换 (HMR - Hot Module Replacement) 功能会在应用程序运行过程中替换、添加或删除模块，而无需重新加载整个页面，详细配置地址

devServer:{
        open:true,//在浏览器中开发项目
        openPage:"home.html",//默认会打开index.html文件，但是我们更改为home.html，所以要指定
        host:"127.0.0.1",//设置打开的地址
        port:"8000",//设置打开的端口号
        hot:true,
}

不需要刷新页面就可以实现更新。

十八、devtool

devtool 是 webpack 中的一个配置， 可以将压缩/编译文件中的代码映射回源文件中的原始位置，便于调试代码

https://webpack.js.org/官方文档

https://webpack.js.org/configuration/devtool/#root

1）原始源代码

 devtool:"eval-cheap-module-source-map"

可以准确找到错误在哪行

原理：把app.js打包成base64作为注释行走的，可以看到。

2）转换过的原代码

 devtool:"eval-cheap-source-map"

3）source-map生产环境

devtool:"source-map"

 1）devtool:"eval-cheap-module-source-map"和 devtool:"eval-cheap-source-map"适用于开发环境
 2）devtool:"source-map"适用于生成环境，也可以在开发环境中用
 3种方法都可以生成map只不过前两个不显示，第三个会单独生成一个map文件
 
 

十九、准备生产环境

1.生成环境：打包—>npx webpack

2.开发环境：提供了node环境—>npx webpack-dev-server

config文件夹
    1）config.dev.js   :开发环境使用
    2）config.prod.js  :生产环境中使用。

配置文件

"scripts": {
    "server":"npx webpack-dev-server",
    "build": "npx webpack --config config/config.prod.js",
    "start": "npx webpack-dev-server --config config/config.dev.js"
}

二十、提取css成单独文件

1)安装插件

cnpm i mini-css-extract-plugin -D

2)引入插件

const MiniCssExtractPlugin = require("mini-css-extract-plugin");

3)增加一个rules

 {
                test:/\.scss$/,
                use:[
                    MiniCssExtractPlugin.loader,//插件的一个属性
                    "css-loader",
                    "sass-loader"
                ]
            },

4）插件

 new MiniCssExtractPlugin({
            filename:"css.[hash:8].css",
})

css不会作为一个script标签，而是作为一个css文件被引入

二十一、添加css兼容（了解）

1）下载

cnpm i postcss-loader autoprefixer -D

module.exports = {
    plugins: [
        require("autoprefixer") 	// 2. 配置插件
    ]
}