mhbsoft的博客

安装 postcss-loader autoprefixer 插件npm i -D postcss-loader autoprefixer配置 webpack.config.js{ test: /.styl(us)?$/, use: [ 'style-loader', 'css-loader', 'postcss-loader', // 加载一个 autofixer 的插件 'stylus-loader', // st

安装：npm install rimraf -g使用：rimraf node_modules

webpack.config.jsconst { resolve } = require('path');const HtmlWebpackPlugin = require('html-webpack-plugin');module.exports = { entry: './src/js/index.js', output: { // [name] 默认是 main， 可以写固定值 // 文件名称（制定名称+目录） filename: 'js/[name].js',

webpack.config.jsconst { resolve } = require('path');const HtmlWebpackPlugin = require('html-webpack-plugin');module.exports = { entry: './src/index.js', output: { // [name] 默认是 main， 可以写固定值 // 文件名称（制定名称+目录） filename: 'js/[name].js',

webpack.config.jsconst { resolve } = require('path');const HtmlWebpackPlugin = require('html-webpack-plugin');module.exports = { entry: './src/index.js', output: { // [name] 默认是 main， 可以写固定值 // 文件名称（制定名称+目录） filename: 'js/[name].js',

webpack.config.jsconst { resolve } = require('path');const HtmlWebpackPlugin = require('html-webpack-plugin');/** * entry: 入口起点 * 1. string --> './src/index.js' * entry: './src/index.js', * 打包形成一个 chunk， 输出一个 bundle 文件 * fil

webpack性能优化开发环境性能优化生产环境性能优化开发环境性能优化优化打包构建速度HMR优化代码调试source-map生产环境性能优化优化打包构建速度oneOfbabel缓存多进程打包externalsdll优化代码运行的性能缓存（hash-chunkhash-contenthash）tree shakingcode split懒加载/预加载pwa...

externals： 使用cdn引入不需要打包。dll ： 只打包一次。以后不再打包。externalswebpack.config.jsconst {resolve} = require('path');const HtmlWebpackPlugin = require('html-webpack-plugin');module.exports = { entry: './src/js/index.js', output: { filename: 'js/bu

thread-loader’ 可以给多个loader 加多线程打包多线程打包 loader{ test: /\.js$/, exclude: /node_modules/, use: [ // 开启多进程打包 // 进程启动大概 600ms， 进程通信 也要花时间。 // 只有工作消耗时间比较长，才需要多进程打包。 // 'thread-loader', // 进程默认 cpu核数-1 { loader: 'thread-loa

1. webpack.config.jsconst GenerateSW = require('workbox-webpack-plugin');...// 插件module.exports = {... plugins: [ ... new GenerateSW.GenerateSW({ // 帮助 serviceworker 快速启动 // 删除旧的 serviceworker //

webpack.config.jsconst {resolve} = require('path');const HtmlWebpackPlugin = require('html-webpack-plugin');// 提取单独css文件 替代 style-loaderconst MiniCssExtractPlugin = require('mini-css-extract-plugin');// 压缩cssconst OptimizeCssAssetsWebpackPlugin = req

webpack.config.js搜索：contenthash可以找到相关写法配置const {resolve} = require('path');const HtmlWebpackPlugin = require('html-webpack-plugin');// 提取单独css文件 替代 style-loaderconst MiniCssExtractPlugin = require('mini-css-extract-plugin');// 压缩cssconst OptimizeCss

webpack.config.js中追加如下配置：devtool: 'inline-source-map’ /** * 所有构建工具都是基于nodejs平台运行的，模块化默认采用commonjs * 运行项目指令 * webpack 会打包结果输出 * npx webpack-dev-server 只会在内存中编译打包，没有输出 * * HMR: hot module replacement 热模块替换 / 模块热替换 * 作用： 一个模块发生变化，只会重新打包这一个模块。

webpack.config.js/** * 所有构建工具都是基于nodejs平台运行的，模块化默认采用commonjs * 运行项目指令 * webpack 会打包结果输出 * npx webpack-dev-server 只会在内存中编译打包，没有输出 * * HMR: hot module replacement 热模块替换 / 模块热替换 * 作用： 一个模块发生变化，只会重新打包这一个模块。 * 极大提升构建速度。 * * 样式文件： 可以使

webpack.config.jsconst {resolve} = require('path');const HtmlWebpackPlugin = require('html-webpack-plugin');module.exports = { entry: './src/js/index.js', output: { filename: 'js/build.js', path: resolve(__dirname, 'build')

webpack.config.jsconst {resolve} = require('path');const HtmlWebpackPlugin = require('html-webpack-plugin');module.exports = { entry: './src/js/index.js', output: { filename: 'js/build.js', path: resolve(__dirname, 'build') }

webpack.config.js// 定义项目根目录const {resolve} = require('path');// 引入html插件，使用模板，html压缩const HtmlWebpackPlugin = require('html-webpack-plugin');// 提取单独css文件 替代 style-loaderconst MiniCssExtractPlugin = require('mini-css-extract-plugin');// 压缩cssconst O

实现热加载npm install webpack-dev-server --save实现模版引入npm i html-webpack-plugin --save-dev