这是我参与「第五届青训营 」笔记创作活动的第7天

深入webpack

搭建vue开发环境

将index.html的body部分修改为<div id="app"></div>

安装vue

安装vue-loader

loader用于对源码的转换，vue-loader当然是转换vue源代码

同时需要安装vue

npm install vue
npm install -D vue-loader

修改webpack.config.js

引入vueloader

在plugins中添加new VueLoaderPlugin()

在module->rules中添加{test:/.vue%/,loader:'vue-loader'}

安装HtmlWebpackPlugin

htmlwebpackplugin可以自动将js引入html，也可以指定html模板

npm install -D html-webpack-plugin

修改webpack.config.js

在plugins中添加new HtmlWebpackPlugin()

安装babel-loader(可选)

可以将es6语法转换为es5以供浏览器识别

npm install -D babel-loader

修改webpack.config.js

在rules里添加一条

{
    test:/.js$/,
    exclude:/node_modules/,
    use:{
        loader:"babel-loader"
    }
}

配置resolve

配置模块如何解析，可以在引入模块时无需加上后缀，自动按顺序引入

并且可以配置别名

修改webpack.config.js，加入

resolve:{
    extensions:['.vue','.js','.json'],
    alias:{
        '@':resolve(__dirname,'src')
    }
}

使用CSS预处理器(可选)

一般使用sass或less

npm install sass -D
npm install sass-loader

在rules中新增规则

{
    test:/.s[ac]ss/,
    use:[
        'style-loader',
        'css-loader',
        'sass-loader'
    ]
}

依次引入style-loader``css-loader``sass-loader

执行顺序为从上到下。

style-loader将js转换为style dom

css-loader将css转换为js模块

sass-loader将sass编译为css

使用less

安装less-ader

npm install -D less less-loader

修改webpack.config.js，rules添加一条

{
    test:/.less/,
    use:[
        "style-loader",
        "css-loader",
        "less-loader"
    ]
}

提取CSS

使用minicssextractplugin

npm install -D mini-css-extract-plugin

然后进行配置

plugins:[
    new MiniCssExtractPlugin({
        filename:'assets/css/[name].style.css',
        chunkFilename:'assets/css/[name].css'
    })
]

将rules中style-loader替换为MiniCssExtractPlugin.loader

压缩css

使用CssMinizerWebpackPlugin

npm install -D css-minimizer-webpack-plugin 

修改webpack.config.js

optimization:{
    minimizer:[
        new CssMinimizerPlugin()
    ]
}

这将仅在生产环境开启 CSS 优化。

如果还想在开发环境下启用 CSS 优化，请将 optimization.minimize 设置为 true

代码分离

使用splite-chunksplugin将公共的依赖模块提取到已有的入口chunk中，或者提取到一个新的chunk中

optimization:{
    splitChunks:{
        chunks:'all'
    }
}

构建优化 使用CDN

externals:{
    'vue':'Vue'
}

这样引入vue时就会使用来自CDN的全局Vue对象

通过配置external来防止某些包被打包到bundle中

接下来只需要在html模板中引入cdn即可