wordpress建立的网站吗,延吉网站建设公司哪家好,新手做网站需要多久,自动做微网站3 webpack生产环境配置 由于笔记文档没有按照之前的md格式书写#xff0c;所以排版上代码上存在问题#x1f622;#x1f622;#x1f622;#x1f622; 09 提取css成单独文件
使用下载插件 npm i mini-css-extract-plugin0.9.0 -D
webpack配置此时a,b提取成单独文件,并且…3 webpack生产环境配置 由于笔记文档没有按照之前的md格式书写所以排版上代码上存在问题 09 提取css成单独文件
使用下载插件 npm i mini-css-extract-plugin0.9.0 -D
webpack配置此时a,b提取成单独文件,并且页面显示正确10 css兼容性处理
使用下载插件 npm i postcss-loader3.0.0 postcss-preset-env6.7.0 -D
写相应的配置源代码 JavaScriptconst { resolve } require(path); const HtmlWebpackPlugin require(html-webpack-plugin); const MiniCssExtractPlugin require(mini-css-extract-plugin); // 设置nodejs环境变量 // process.env.NODE_ENV development; module.exports { entry: ./src/js/index.js, output: { filename: js/built.js, path: resolve(__dirname, build) }, module: { rules: [ { test: /\.css$/, use: [ MiniCssExtractPlugin.loader, css-loader, /* css兼容性处理postcss -- postcss-loader postcss-preset-env 帮postcss找到package.json中browserslist里面的配置通过配置加载指定的css兼容性样式 browserslist: { // 开发环境 -- 设置node环境变量process.env.NODE_ENV development development: [ last 1 chrome version, last 1 firefox version, last 1 safari version ], // 生产环境默认是看生产环境 production: [ 0.2%, not dead, not op_mini all ] } */ // 使用loader的默认配置 // postcss-loader, // 修改loader的配置 { loader: postcss-loader, options: { ident: postcss, plugins: () [ // postcss的插件 require(postcss-preset-env)() ] } } ] } ] }, plugins: [ new HtmlWebpackPlugin({ template: ./src/index.html }), new MiniCssExtractPlugin({ filename: css/built.css }) ], mode: development };
需要在package.json配置11 压缩css 配置中要么用loader要么用插件loader做事一遍比较少更多的用插件 兼容性一般靠loader压缩靠插件
下载插件 npm i optimize-css-assets-webpack-plugin5.0.3 -D
webpack配置打包 npx webpack
可以看到build/css/build.css代码压缩成一行压缩css插件 optimize-css-assets-webpack-plugin 压缩让文件体积变小请求速度就会越快加载速度就快用户看到效果就越快用户体验就会更好 代码上线之前就一定要压缩
12 js语法检查
需要将airbnb/javascript 这个规则用到eslint下载使用到的插件npm i eslint6.8.0 eslint-loader3.0.3 eslint-plugin-import2.20.1 eslint-config-airbnb-base14.0.0 -D
webpack配置JavaScriptconst { resolve } require(path); const HtmlWebpackPlugin require(html-webpack-plugin); module.exports { entry: ./src/js/index.js, output: { filename: js/built.js, path: resolve(__dirname, build) }, module: { rules: [ /* 语法检查 eslint-loader eslint 注意只检查自己写的源代码第三方的库是不用检查的 设置检查规则 package.json中eslintConfig中设置~ eslintConfig: { extends: airbnb-base } airbnb -- eslint-config-airbnb-base eslint-plugin-import eslint */ { test: /\.js$/, exclude: /node_modules/, loader: eslint-loader, options: { // 自动修复eslint的错误 fix: true } } ] }, plugins: [ new HtmlWebpackPlugin({ template: ./src/index.html }) ], mode: development };
其中需要到package.json里面配置打包之后效果js语法检查 语法检查 eslint-loader eslint 注意只检查自己写的源代码第三方的库是不用检查的设置检查规则 package.json中eslintConfig中设置~ eslintConfig: { extends: airbnb-base } airbnb -- eslint-config-airbnb-base eslint-plugin-import eslint
13 js兼容性处理
下载插件 npm i babel-loader8.0.6 babel/preset-env7.8.4 babel/core7.8.4 -D
webpack配置但是只能转换基本语法promise就不能需要全部兼容性处理
下载 npm i babel/polyfill7.8.3 -D
从Babel 7.4.0开始这个包已经被废弃了取而代之的是直接包含core-js/stable
我只要解决部分兼容性问题但是将所有兼容性代码全部引入体积太大了
需要做兼容性处理的就做按需加载 core.js
下载 npm i core-js3.6.4 -D
最终webpack配置JavaScriptconst { resolve } require(path); const HtmlWebpackPlugin require(html-webpack-plugin); module.exports { entry: ./src/js/index.js, output: { filename: js/built.js, path: resolve(__dirname, build) }, module: { rules: [ /* js兼容性处理babel-loader babel/core 1. 基本js兼容性处理 -- babel/preset-env 问题只能转换基本语法如promise高级语法不能转换 2. 全部js兼容性处理 -- babel/polyfill 问题我只要解决部分兼容性问题但是将所有兼容性代码全部引入体积太大了~ 3. 需要做兼容性处理的就做按需加载 -- core-js */ { test: /\.js$/, exclude: /node_modules/, loader: babel-loader, options: { // 预设指示babel做怎么样的兼容性处理 presets: [ [ babel/preset-env, { // 按需加载 useBuiltIns: usage, // 指定core-js版本 corejs: { version: 3 }, // 指定兼容性做到哪个版本浏览器 targets: { chrome: 60, firefox: 60, ie: 9, safari: 10, edge: 17 } } ] ] } } ] }, plugins: [ new HtmlWebpackPlugin({ template: ./src/index.html }) ], mode: development }; js兼容性处理babel-loader babel/core 1. 基本js兼容性处理 -- babel/preset-env 问题只能转换基本语法如promise高级语法不能转换 2. 全部js兼容性处理 -- babel/polyfill ----不用写配置直接在入口文件里面引入即可 import babel/polyfill; 问题我只要解决部分兼容性问题但是将所有兼容性代码全部引入体积太大了~ 3. 需要做兼容性处理的就做按需加载 -- core-js 一般最终都是通过第一步和第三步一起完成的
14 压缩 js
只需要将development调成production即可生产环境下会自动压缩js代码production里面的UglifyJsPlugin插件会自动去压缩js内部都实现好了
15 压缩 html
在HtmlWebpackPlugin里加一个选项minify 16 生产环境基本配置 JavaScriptconst { resolve } require(path); const MiniCssExtractPlugin require(mini-css-extract-plugin); const OptimizeCssAssetsWebpackPlugin require(optimize-css-assets-webpack-plugin); const HtmlWebpackPlugin require(html-webpack-plugin); // 定义nodejs环境变量决定使用browserslist的哪个环境 process.env.NODE_ENV production; // 复用loader const commonCssLoader [ MiniCssExtractPlugin.loader, css-loader, { // 还需要在package.json中定义browserslist loader: postcss-loader, options: { ident: postcss, plugins: () [require(postcss-preset-env)()] } } ]; module.exports { entry: ./src/js/index.js, output: { filename: js/built.js, path: resolve(__dirname, build) }, module: { rules: [ { test: /\.css$/, use: [...commonCssLoader] }, { test: /\.less$/, use: [...commonCssLoader, less-loader] }, /* 正常来讲一个文件只能被一个loader处理。 当一个文件要被多个loader处理那么一定要指定loader执行的先后顺序 先执行eslint 在执行babel */ { // 在package.json中eslintConfig -- airbnb test: /\.js$/, exclude: /node_modules/, // 优先执行 enforce: pre, loader: eslint-loader, options: { fix: true } }, { test: /\.js$/, exclude: /node_modules/, loader: babel-loader, options: { presets: [ [ babel/preset-env, { useBuiltIns: usage, corejs: {version: 3}, targets: { chrome: 60, firefox: 50 } } ] ] } }, { test: /\.(jpg|png|gif)/, loader: url-loader, options: { limit: 8 * 1024, name: [hash:10].[ext], outputPath: imgs, esModule: false } }, { test: /\.html$/, loader: html-loader }, { exclude: /\.(js|css|less|html|jpg|png|gif)/, loader: file-loader, options: { outputPath: media } } ] }, plugins: [ new MiniCssExtractPlugin({ filename: css/built.css }), new OptimizeCssAssetsWebpackPlugin(), new HtmlWebpackPlugin({ template: ./src/index.html, minify: { collapseWhitespace: true, removeComments: true } }) ], mode: production };
