webpack 学习记录 开发环境
Posted 青春是首不老歌。
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了webpack 学习记录 开发环境相关的知识，希望对你有一定的参考价值。
webpack学习记录
开发模式 development
const { resolve } = require(‘path‘); const htmlWebpackPlugin = require(‘html-webpack-plugin‘); // html打包 const MiniCssExtractPlugin = require(‘mini-css-extract-plugin‘); // css单独打包
// 创建多个实例 module.exports = { // 入口文件 entry: [‘./src/js/index.js‘, ‘./src/index.html‘], // 输出 output: { // 输出文件名 filename: ‘js/built.js‘, // 输出文件路径 path: resolve(__dirname, ‘build‘), }, module: { rules: [ // loader的配置 { // 处理less资源 test: /.less$/, // 这个loader取代style-loader作用提取js中的css成单独文件 use: [ MiniCssExtractPlugin.loader, ‘css-loader‘, ‘less-loader‘, { iden: ‘postcss‘, options: { ident: ‘postcss‘, plugins: () => [ // postcss 的插件 require(‘postcss-preset-env‘)(), ], }, }, ], }, { // 处理css资源 test: /.css$/, use: [ MiniCssExtractPlugin.loader, ‘css-loader‘, { ident: ‘postcss‘, plugins: () => { require(‘postcss-preset-env‘); }, }, ], }, { // 处理图片资源 test: /.(jpg|png|gif)$/, loader: ‘url-loader‘, options: { // 图片小于8kb就会被base64处理 limit: 8 * 1024, // hash前10位，文件原来扩展名 name: ‘[hash:10].[ext]‘, // 关闭es6模块化,html引用采用common.js esModule: false, outputPath: ‘images‘, }, }, { // 处理html中img资源 test: /.html$/, loader: ‘html-loader‘, }, { // 处理其他资源 exclude: /.(html|js|css|less|jpg|png|gif)/, loader: ‘file-loader‘, options: { name: ‘[hash:10].[ext]‘, outputPath: ‘media‘, }, }, { test: /.js$/, use: [‘source-map-loader‘], enforce: ‘pre‘, // 从所有 javascript 条目中提取现有源映射。 打包调试 // 这包括内联源映射以及通过 URL 链接的地图。所有源地图数据都传递给 Webpack 进行处理 }, // js语法校验，建议配合prettier使用 { test: /.js$/, exclude: /node_modules/, loader: ‘eslint-loader‘, // 修复错误 options: { fix: true }, }, // js兼容性 { test: /.js$/, exclude: /node_modules/, loader: ‘babel-loader‘, options: [ [ ‘@babel/preset-env‘, { // 按需加载 useBuiltIns: ‘usage‘, // 指定core-js版本 coreks: { version: 3, }, // 考虑兼容性做到那个版本 targets: { chrome: ‘60‘, firefox: ‘60‘, }, }, ], ], }, ], }, plugins: [ // plugins的配置 new HtmlWebpackPlugin({ template: ‘./src/index.html‘, }),
// 分割CSS new MiniCssExtractPlugin({ filename: ‘css/built.css‘, }),
// 压缩 css
new OptimizeCssAssetsWebpackPlugin()
], mode: ‘development‘, devServer: { // 项目构建目录 contentBase: resolve(__dirname, ‘build‘), // 启动gzip compress: true, // 端口号 port: 3000, // 自动打开浏览器 open: true, // HMR热加载 优化打包速度 当修改了webpack配置，新配置要想生效，必须重启webpack服务 hot: true, }, devtool: ‘eval-source-map‘, };
开发环境配置：能让代码运行
运行项目指令：
webpack 会将打包结果输出出去
npx webpack-dev-server 只会在内存中编译打包，没有输出
HMR: hot module replacement 热模块替换 / 模块热替换
作用：一个模块发生变化，只会重新打包这一个模块（而不是打包所有模块）
极大提升构建速度
样式文件：可以使用HMR功能：因为style-loader内部实现了~
js文件：默认不能使用HMR功能 --> 需要修改js代码，添加支持HMR功能的代码
注意：HMR功能对js的处理，只能处理非入口js文件的其他文件。
html文件: 默认不能使用HMR功能.同时会导致问题：html文件不能热更新了~ （不用做HMR功能）
解决：修改entry入口，将html文件引入
source-map: 一种 提供源代码到构建后代码映射 技术
（如果构建后代码出错了，通过映射可以追踪源代码错误）
[inline-|hidden-|eval-][nosources-][cheap-[module-]]source-map source-map：外部 错误代码准确信息 和 源代码的错误位置 inline-source-map：内联 只生成一个内联source-map 错误代码准确信息 和 源代码的错误位置 hidden-source-map：外部 错误代码错误原因，但是没有错误位置 不能追踪源代码错误，只能提示到构建后代码的错误位置 eval-source-map：内联 每一个文件都生成对应的source-map，都在eval 错误代码准确信息 和 源代码的错误位置 nosources-source-map：外部 错误代码准确信息, 但是没有任何源代码信息 cheap-source-map：外部 错误代码准确信息 和 源代码的错误位置 只能精确的行 cheap-module-source-map：外部 错误代码准确信息 和 源代码的错误位置 module会将loader的source map加入 内联 和 外部的区别：1. 外部生成了文件，内联没有 2. 内联构建速度更快 开发环境：速度快，调试更友好 速度快(eval>inline>cheap>...) eval-cheap-souce-map eval-source-map 调试更友好 souce-map cheap-module-souce-map cheap-souce-map --> eval-source-map / eval-cheap-module-souce-map
生产环境：源代码要不要隐藏? 调试要不要更友好
内联会让代码体积变大，所以在生产环境不用内联
nosources-source-map 全部隐藏
hidden-source-map 只隐藏源代码，会提示构建后代码错误信息
--> source-map / cheap-module-souce-map
eslint代码校验需要在json设置 设置为airbnb-base (如果需要定制代码样式可以去找eslint官网查看)
1 "eslintConfig": { 2 "extends": "airbnb-base", 3 "env": { 4 "browser": true 5 } 6 }
css 兼容性
"browserslist": { "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ], "production": [ ">0.2%", "not dead", "not op_mini all" ] }
所用到NPM包
"devDependencies": { "@babel/core": "^7.10.4", "@babel/polyfill": "^7.10.4", "@babel/preset-env": "^7.10.4", "babel-loader": "^8.1.0", "core-js": "^3.6.5", "css-loader": "^3.6.0", "eslint": "^7.4.0", "eslint-config-airbnb-base": "^14.2.0", "eslint-loader": "^4.0.2", "eslint-plugin-import": "^2.22.0", "file-loader": "^6.0.0", "html-loader": "^1.1.0", "html-webpack-plugin": "^4.3.0", "less-loader": "^6.2.0", "mini-css-extract-plugin": "^0.9.0", "optimize-css-assets-webpack-plugin": "^5.0.3", "postcss-loader": "^3.0.0", "postcss-preset-env": "^6.7.0", "source-map-loader": "^1.0.0", "style-loader": "^1.2.1", "url-loader": "^4.1.0", "webpack": "^4.43.0", "webpack-cli": "^3.3.12" },
以上是关于webpack 学习记录 开发环境的主要内容，如果未能解决你的问题，请参考以下文章