这次给大家带来webpack中如何操作dev与prd，webpack中操作dev与prd的注意事项有哪些，下面就是实战案例，一起来看一下。
概述本月迎来了 v4 正式版的发布，本文用于学习新特性和总结开发必用plugin & loader，从dev到prd，走你~
big changesenvironment
node.js 4 is no longer supported. source code was upgraded to a higher ecmascript version.
usage
you have to choose (mode or --mode) between two modes now: production or development
本次新版本中引入了 mode 配置项，开发者可在 none，development（开发 ） 以及 production（产品）三种模式间选择。该配置项缺省情况下默认使用 production 模式。
development 模式给你极致的开发体验，包含浏览器调试相关工具，极快的增量编译，丰富全面的报错信息...
production 模式则包含大量发版优化，代码压缩，丝般润滑的运行时优化，开发相关代码的排除，易用，etc.
none 不使用预设，等于老版本中全部自己配置的原始状态。
eg:
webpack --mode development
usage
some plugin options are now validated
cli has been move to webpack-cli, you need to install webpack-cli to use the cli
the progressplugin (--progress) now displays plugin names
at least for plugins migrated to the new plugin system
新版中将 webpack 命令行工具拆分到单独的仓库中，所以需要额外安装 webpack-cli。
npm init -y //初始化项目npm install webpack webpack-cli -d //安装webpack webpack-cli 依赖npx webpack --mode development // npx可以直接运行node_modules/.bin目录下面的命令
或者通过配置package.json的script build
scripts: { build: webpack --mode development,},
加载loader方法总结use
module: { rules:[  {    test: /\.css$/,   use: ['style-loader','css-loader']  } ]}
css-loader用来解析处理css文件中的url路径,要把css文件变成一个模块
多个loader是有顺序要求的，从右往左写，因为转换的时候是从右往左转换
此插件先用css-loader处理一下css文件，再用style-loader把css文件变成style标签插入head中
loader
module: { rules:[  {   test: /\.css$/,   loader: [style-loader, css-loader]  }, ]}
use+loader
module: { rules:[  {   test: /\.css$/,   use:[    { loader:style-loader},    {      loader: 'css-loader',     options: {sourcemap: true}    }   ]  } ]}
这三种loader的写法，最后打包的结果相同
loader中的options配置项可以用?跟在加载器后面
eg:
{  test: /\.jpeg$/,  use: 'url-loader?limit=1024&name=[path][name].[ext]&outputpath=img/&publicpath=output/', }
为以下配置的简写
{  test: /\.jpeg$/,  use: {  loader:'url-loader',  options:{   limit:1024,   name:[path][name].[ext],   outputpath:img/   publicpath:output/'  } }}
开发必备的loader&pluginscss-loader
babel-loader
讲es6代码转换为es5
{ test: /\.js/, use: {  loader: 'babel-loader',  query: {   presets: [env, stage-0, react]  } }},
babel-loader的预设可以添加在query中，也可以在项目根目录添加 .babelrc 文件
.babelrc{ presets: [  env,  stage-0,  react ]}
html-webpack-plugin
插件的基本作用就是生成html文件。原理很简单：
将 webpack中entry配置的相关入口thunk  和  extract-text-webpack-plugin抽取的css样式   插入到该插件提供的template或者templatecontent配置项指定的内容基础上生成一个html文件，具体插入方式是将样式link插入到head元素中，script插入到head或者body中。
const htmlwebpackplugin = require('html-webpack-plugin');new htmlwebpackplugin({ template: './src/index.html',//指定产的html模板 filename: `index.html`,//产出的html文件名 title: 'index', hash: true,// 会在引入的js里加入查询字符串避免缓存, minify: {  removeattributequotes: true }}),
可以用 cnpm search html-webpack-plugin 查找想用loader的用法
less-loader sass-loader
优化向prd进发提取公共的css代码
它会将所有的入口 chunk(entry chunks)中引用的 *.css，移动到独立分离的 css 文件。因此，你的样式将不再内嵌到 js bundle 中，而是会放到一个单独的 css 文件（即 styles.css）当中。 如果你的样式文件大小较大，这会做更快提前加载，因为 css bundle 会跟 js bundle 并行加载。
npm i extract-text-webpack-plugin@next -d
const extracttextwebpackplugin = require('extract-text-webpack-plugin');let cssextract = new extracttextwebpackplugin({ filename: 'css/css.css', allchunks: true});
module:{ rules:[  {   test: /\.css$/,//转换文件的匹配正则   loader: cssextract.extract({    use: [css-loader?minimize]   })  }, ]}plugins:[ ...... , + cssextract]
尽量减少文件解析,用resolve配置文件解析路径,include
rules: { test: /\.js$/, loader:'babel-loader', include: path.resolve(__dirname, 'src'),//只转换或者编译src 目录 下的文件 exclude: /node_modules/ //不要解析node_modules}
resolve.mainfields
webpacktest||| - src| | - index.js|| - lib| | - fetch|  ||  browser.js|  node.js|  package.json|| - webpack.config.js
当从 npm 包中导入模块时（例如，引入lib下的库），此选项将决定在 package.json 中使用哪个字段导入模块。根据 webpack 配置中指定的 target 不同，默认值也会有所不同。
package.json
lib文件夹下的package.json中配置相对应模块的key
{ name: fetch, version: 1.0.0, description: , node: ./node.js, browser: ./browser.js, scripts: { test: echo \error: no test specified\ && exit 1 }, keywords: [], author: , license: isc}
webpack.config.js
在resolve解析对象中，加入lib的路径
resolve: { extensions: ['.js', '.json'], mainfields: ['main', 'browser', 'node'], modules: [path.resolve('node_modules'), path.resolve('lib')]}
index.js
这样在index.js中引用第三方库时，会去查找modules下的路径中是否配置了所需的文件，知道在package.json中找到mainfields中的key对应文件，停止。
let fetch = require('fetch');console.log(fetch);
打包后 console.log出的对象
如果交换mainfields中的key顺序
mainfields: ['main', 'node','browser']
打包后 console.log出的对象，因为找到了key=node对应的文件就停止了查找
dllreferenceplugin
这个插件是在 webpack 主配置文件中设置的， 这个插件把只有 dll 的 bundle(们)(dll-only-bundle(s)) 引用到需要的预编译的依赖。
新建webpack.react.config.js
const path = require('path');const webpack = require('webpack')module.exports = { entry: {  react: ['react', 'react-dom'] }, output: {  path: path.join(__dirname, 'dist'),// 输出动态连接库的文件名称  filename: '[name]_dll.js',  library: '_dll_[name]'//全局变量的名字，其它会从此变量上获取到里面的模块 }, // manifest 表示一个描述文件 plugins: [  new webpack.dllplugin({   name: '_dll_[name]',   path: path.join(__dirname, 'dist', 'manifest.json')//最后打包出来的文件目录和名字  }) ]}
在entry入口写入要打包成dll的文件,这里把体积较大的react和react-dom打包
output中的关键是library的全局变量名，下文详细说明dll&manifest工作原理
打包dll文件
webpack --config webpack.react.config.js --mode development
打包出来的manifest.json节选
打包出来的react_dll.js节选
可见manifest.json中的 name值就是
output：{  library:_dll_react}
manifest.json就是借书证，_dll_react就像图书馆书籍的条形码，为我们最终找到filename为react_dll.js的参考书
使用“参考书”
在webpack.config.js中加入“借书证”
new webpack.dllreferenceplugin({  manifest: path.join(__dirname, 'dist', 'manifest.json')})
再运行
webpack --mode development
打包速度显著变快
打包后的main.js中，react,react-dom.js也打包进来了，成功~
import react from 'react';\n//import reactdom from 'react-dom'; (function(module, exports, __webpack_require__) {use strict;eval(\n\n//import name from './base';\n//import react from 'react';\n//import reactdom from 'react-dom';\n//import ajax from 'ajax';\n//let result = ajax('/ajax');\n\n//reactdom.render(<h1>{result}</h1>, document.getelementbyid('root'));\n// fetch fetch.js fetch.json fetch文件夹\n//let fetch = require('fetch');\n//console.log(fetch);\n//let get = require('../dist/bundle.js');\n//get.getname();\nconsole.log('hello');\n\nvar name = 'zfpx';\nconsole.log(name);\nif (true) {\n  var s = 'ssssssssssssssssssssssss';\n  console.log(s);\n  console.log(s);\n  console.log(s);\n  console.log(s);\n}\n\n//# sourceurl=webpack:///./src/index.js?);/***/ })/******/ });
相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！
推荐阅读：
vue内置指令方法与事件
react做出页面代码分割、按需加载
以上就是webpack中如何操作dev与prd的详细内容。