const path = require('path'); const webpack = require('webpack'); const CleanWebpackPlugin = require('clean-webpack-plugin'); const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { entry: './src/index.js', plugins: [ new CleanWebpackPlugin(['dist']), new HtmlWebpackPlugin({title: 'webpack'}), new webpack.HashedModuleIdsPlugin() ], output: { filename: '[name].[chunkhash].js', path: path.resolve(__dirname, 'dist') }, module: { rules: [ { test: /\.js?$/, exclude: /(node_modules)/, loader: 'babel-loader', query: { presets: [ 'react', 'es2015' ], plugins: ['react-html-attrs'] } }, { test: /\.css$/, use: ['style-loader', 'css-loader'] }, { test: /\.(png|svg|jpg|gif)$/, use: ['file-loader'] }, { test: /\.(woff|woff2|eot|ttf|otf)$/, use: ['file-loader'] }, { test: /\.(csv|tsv)$/, use: ['csv-loader'] }, { test: /\.xml$/, use: ['xml-loader'] } ] } };
rules配置中我们也就是将一些可能用到的文件也配置到webpack中来, babel-loader这种如果要讲还可以再开一篇, 其实就是个js的兼容性工具, 这样理解就可以了.
webpack.dev.js
webpack开发环境的配置, 非常简单, 就是用了之前讲的webpack-merge工具, 就和git一样, 合并了webpack.common.js的配置外新加了可以进行调试的inline-source-map工具, 以及热更新的内容索引.
const merge = require('webpack-merge'); const common = require('./webpack.common.js'); module.exports = merge(common, { devtool: 'inline-source-map', devServer: { contentBase: './dist' } });
webpack.prod.js
webpack生产环境的配置, 新加了一个压缩插件以及环境配置的插件, 这里的开发工具和开发还款下的有所不同, 具体可直接看官方文档.
const webpack = require('webpack'); const merge = require('webpack-merge'); const UglifyJSPlugin = require('uglifyjs-webpack-plugin'); const common = require('./webpack.common.js'); module.exports = merge(common, { devtool: 'source-map', plugins: [ new UglifyJSPlugin({sourceMap: true}), new webpack.DefinePlugin({ 'process.env': { 'NODE_ENV': JSON.stringify('production') } }) ] });
terminal
这样我们就配置完成啦, 我们在终端上输入看下效果:
cd ../ && npm i
首先我们进入到目录下并进行node包的安装.
npm run build
MacBook-Pro-15:webpack zhushuangquan$ npm run build > webpack@1.0.0 build /Users/zhushuangquan/Documents/code/webpack > webpack --config webpack.prod.js clean-webpack-plugin: /Users/zhushuangquan/Documents/code/webpack/dist has been removed. Hash: 85b65f54ef1436b295a5 Version: webpack 3.6.0 Time: 1148ms Asset Size Chunks Chunk Names main.014ac9aa420264da48eb.js 671 bytes 0 [emitted] main main.014ac9aa420264da48eb.js.map 6.47 kB 0 [emitted] main index.html 197 bytes [emitted] [lVK7] ./src/index.js 184 bytes {0} [built] Child html-webpack-plugin for "index.html": 1 asset [3IRH] (webpack)/buildin/module.js 517 bytes {0} [built] [DuR2] (webpack)/buildin/global.js 509 bytes {0} [built] + 2 hidden modules
我们可以看到已经打包好的文件:
main.014ac9aa420264da48eb.js
!function(e){function n(r){if(t[r])return t[r].exports;var o=t[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}var t={};n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{configurable:!1,enumerable:!0,get:r})},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,n){return Object.prototype.hasOwnProperty.call(e,n)},n.p="",n(n.s="lVK7")}({lVK7:function(e,n,t){"use strict";document.body.appendChild(function(){var e=document.createElement("div");return e.innerHTML="Hello webpack",e}())}}); //# sourceMappingURL=main.014ac9aa420264da48eb.js.map
我们可以看到在webpack的打包和压缩下, 代码已经基本不可读了. 所以我们需要加上之前的调试插件, 以便生产环境出现bug后的补救.
npm start
MacBook-Pro-15:webpack zhushuangquan$ npm start > webpack@1.0.0 start /Users/zhushuangquan/Documents/code/webpack > webpack-dev-server --open --config webpack.dev.js clean-webpack-plugin: /Users/zhushuangquan/Documents/code/webpack/dist has been removed. Project is running at :8080/ webpack output is served from / Content not from webpack is served from ./dist webpack: wait until bundle finished: / Hash: 06f20ec519d58fbd5c28 Version: webpack 3.6.0 Time: 1460ms Asset Size Chunks Chunk Names main.5eb4d4e3f458c49658a2.js 852 kB 0 [emitted] [big] main index.html 197 bytes [emitted] [6Um2] (webpack)/node_modules/url/util.js 314 bytes {0} [built] [8o/D] (webpack)-dev-server/client/overlay.js 3.71 kB {0} [built] [HPf+] (webpack)/node_modules/url/url.js 23.3 kB {0} [built] [Lx3u] (webpack)/hot/log.js 1.04 kB {0} [optional] [built] [Sj28] (webpack)-dev-server/node_modules/strip-ansi/index.js 161 bytes {0} [built] [TfA6] (webpack)/hot nonrecursive ^\.\/log$ 170 bytes {0} [built] [U2me] (webpack)/hot/emitter.js 77 bytes {0} [built] [V3KU] (webpack)-dev-server/client/socket.js 1.04 kB {0} [built] [cMmS] (webpack)-dev-server/client?:8080 7.27 kB {0} [built] [gqsi] (webpack)-dev-server/node_modules/loglevel/lib/loglevel.js 7.74 kB {0} [built] [0] multi (webpack)-dev-server/client?:8080 ./src/index.js 40 bytes {0} [built] [gt+Q] (webpack)-dev-server/node_modules/ansi-regex/index.js 135 bytes {0} [built] [lVK7] ./src/index.js 184 bytes {0} [built] [p7Vd] (webpack)/node_modules/punycode/punycode.js 14.7 kB {0} [built] [pEPF] (webpack)/node_modules/querystring-es3/index.js 127 bytes {0} [built] + 73 hidden modules Child html-webpack-plugin for "index.html": 1 asset [3IRH] (webpack)/buildin/module.js 517 bytes {0} [built] [DuR2] (webpack)/buildin/global.js 509 bytes {0} [built] [M4fF] ./node_modules/lodash/lodash.js 540 kB {0} [built] [a/t9] ./node_modules/html-webpack-plugin/lib/loader.js!./node_modules/html-webpack-plugin/default_index.ejs 538 bytes {0} [built] webpack: Compiled successfully.
我们可以看到打开了一个内容为Hello webpack的网页在8080端口, 当我们修改了文件时候网页会自动刷新.
知识点:
回到我们刚才的package.json的命令行配置来看.