②webpack 生产环境配置
本文共 11533 字，大约阅读时间需要 38 分钟。
webpack
本人是个新手，写下博客用于自我复习、自我总结。 如有错误之处，请各位大佬指出。 学习资料来源于：尚硅谷
生产环境配置
开发环境配置能够让我们更方便，而生产环境配置能让代码优化，性能更好，让代码兼容浏览器，更平稳的运行。
提取css成单独文件
import '../css/a.css';import '../css/b.css';
a.css
#box1 { width: 100px; height: 100px; background-color: pink;} b.css
#box2 { width: 200px; height: 200px; background-color: deeppink;} index.html
webpack
webpack.config.js
const { resolve } = require('path');const HtmlWebpackPlugin = require('html-webpack-plugin');const MiniCssExtractPlugin = require('mini-css-extract-plugin');module.exports = { entry: './src/js/index.js', output: { filename: 'js/built.js', path: resolve(__dirname, 'build') }, module: { rules: [ { test: /\.css$/, use: [ // 创建style标签，将样式放入 // 'style-loader', // 这个loader取代style-loader。作用：提取js中的css成单独文件 MiniCssExtractPlugin.loader, // 将css文件整合到js文件中 'css-loader' ] } ] }, plugins: [ new HtmlWebpackPlugin({ template: './src/index.html' }), new MiniCssExtractPlugin({ // 对输出的css文件进行重命名 filename: 'css/built.css' }) ], mode: 'development'}; 单独提取出来，效率会更好一些。
打包，运行其中的index.html
css兼容性处理
这之后，我们就只需要编写最简单的代码，这些工具就会帮我们做兼容性处理。
安装：
webpack.config.js const { 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，加一段话：
"browserslist": { "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ], "production": [ ">0.2%", "not dead", "not op_mini all" ] } 这样就能通过配置加载指定的css兼容性样式。在使用时，就可以设置nodejs环境变量来使用（默认为生产环境）。使用开发环境：
process.env.NODE_ENV = 'development'; 到底两种环境有什么区别，会做什么操作？
比如下述css，backface-visibility并不是所有浏览器都支持运行的，所以通过设置兼容性处理，会转成-webkit-backface-visibility。 
#box1 { width: 100px; height: 100px; background-color: pink; display: flex; backface-visibility: hidden;} 而对于不同的兼容性样式，对于display:flex，在生产环境下它就会被兼容性处理成
-webkit-box，在开发环境下就不会。而backface-visibility在每一种环境下都会做兼容性处理。这主要取决于当前市面上的浏览器能否兼容这些css语法。 （具体的可以打包运行后，看css文件） 压缩css
安装：
webpack.config.js const { resolve } = require('path');const HtmlWebpackPlugin = require('html-webpack-plugin');const MiniCssExtractPlugin = require('mini-css-extract-plugin');const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-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', { 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' }), // 压缩css new OptimizeCssAssetsWebpackPlugin() ], mode: 'development'}; 打包运行，查看压缩后css文件：（变成一行）
js语法检查 eslint
语法检查能够检查常见的语法错误，让我们的代码不出现问题。
安装：
webpack.config.js
const { 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中加一段话：
"eslintConfig": { "extends": "airbnb-base", } 然后随便写个html和js，运行打包。
index.js
function add(x , y) { return x + y;}// 下一行eslint所有规则都失效（下一行不进行eslint检查）// eslint-disable-next-lineconsole.log(add(2, 5)); index.html
webpack hello webpack
js兼容性处理
安装：
js兼容性处理必备：babel-loader @babel/core
1. 基本js兼容性处理 --> @babel/preset-env 问题：只能转换基本语法，如promise高级语法不能转换 2. 全部js兼容性处理 --> @babel/polyfill 问题：假如我只要解决部分兼容性问题，但是将所有兼容性代码全部引入，体积太大 3. 需要做兼容性处理的就做：按需加载 --> core-js
webpack.config.js const { 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'}; index.js
// import '@babel/polyfill'; 第二种方式，在这里引入const add = (x, y) => { return x + y;};console.log(add(2, 5));const promise = new Promise(resolve => { setTimeout(() => { console.log('定时器执行完了~'); resolve(); }, 1000);});console.log(promise); index.html
webpack hello webpack
压缩html和js
生产环境下会自动压缩js代码，所以只需要改配置即可：
webpack.config.js
const { 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') }, plugins: [ new HtmlWebpackPlugin({ template: './src/index.html' }) ], // 生产环境下会自动压缩js代码 mode: 'production'}; 对于html压缩：（html是不需要兼容性处理的，因为可想而知，这个标签，浏览器认识就认识了，不认识咱们也没办法改）
webpack.config.js
const { 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') }, plugins: [ new HtmlWebpackPlugin({ template: './src/index.html', // 压缩html代码 minify: { // 移除空格 collapseWhitespace: true, // 移除注释 removeComments: true } }) ], mode: 'production'}; 综合：生产环境配置 ※
webpack.config.js
const { 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';// 复用loaderconst commonCssLoader = [ MiniCssExtractPlugin.loader, 'css-loader', { // 还需要在package.json中定义browserslist // css兼容性处理 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 // js语法检查 test: /\.js$/, exclude: /node_modules/, // 优先执行 enforce: 'pre', loader: 'eslint-loader', options: { fix: true } }, { // js兼容性处理 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'}; 转载地址：http://royki.baihongyu.com/
你可能感兴趣的文章
Eclipse下Ant自动打包，混淆和签名
查看>>
android 集成第三方静态库的编译方法
查看>>
linux环境下编译不成功
查看>>
Android系统时间制式的获取（24钟头制式/12小时制式）及UTC与本地时间的转换
查看>>
Android WebView Long Press长按保存图片到手机
查看>>
How To Install Java on Ubuntu with Apt-Get
查看>>
Setting up a Linux build environment
查看>>
BaseAnimation是基于开源的APP,致力于收集各种动画效果(最新版本1.3)
查看>>
TextView显示html图片点击图片放大等操作
查看>>
【Android】自定义控件让TextView的drawableLeft与文本一起居中显示
查看>>
Android Fragment getActivity返回null解决
查看>>
Android(视频、图片)加载和缓存类库Glide
查看>>
Android实现通过浏览器点击链接打开本地应用（APP）并拿到浏览器传递的数据
查看>>
Android音频系统之AudioPolicyService
查看>>
Android系统Root与静默安装
查看>>
Android Property实现介绍
查看>>
Android SystemProperties设置/取得系统属性的用法总结
查看>>
Android 休眠 FLAG_KEEP_SCREEN_ON
查看>>
Android添加onKeyLongPress事件
查看>>
Android使用Contact数据模型来批量插入联系人
查看>>