webpack3 的配置相對于webpack2 又有了一些新的變化，這里講其記錄下來，備查 。
package.json 的完整文件在結尾 。
1. 安裝
npm inityarn add webpack webpack-dev-server -D
2. 配置簡單輸入輸出
webpack.config.js
module.exports = { entry: { ventor: ['react', 'react-dom'], index: [ 'babel-polyfill', 'react-hot-loader/patch', path.resolve(__dirname, "src/index.js") ] }, output: { path: path.resolve(__dirname, "dist"), filename: "js/[name].js", }, devtool: 'source-map'將所用到的庫單獨分離出來，在多頁面應用中，對減少文件體積很有用 。
react-hot-loader 的3.0 版本的get start 剛剛更新 。 單獨打包了補丁，所以react-hot-loader 作為一個生產依賴安裝 。
這樣基本的輸入輸出就完成了 。
3. webpack-dev-server
devServer: { hot: true, // 熱重載 inline: true, // 啟用inline 模式 port: 46480, contentBase: path.resolve(__dirname, "dist"), proxy: { "/api": { target: "xxxxx", secure: false, // 處理https changeOrigin: true, // 跨域 } } },4. loaders
webpack 將所有的文件都當做js文件處理，所以配置加載器
4.1 安裝loader
yarn add babel-loader less-loader postcss-loader css-loader style-loader -Dyarn add react-hot-loader
4.2 配置loader
注意，loader 中的 name 都是相對于 output中的path 的 。
postcss-loader是對css 文件做一些預處理，常用就是添加css3屬性前綴，用到 autoprefixer 插件 。 配置postcss-loader ，需要 postcss.config.js 文件 。
babel-loader 需要配置option選項，這里單獨提出去，放置到.babelrc 文件中 。
webpack.config.js
module: { rules: [{ test: /.js$/, use: [ "react-hot-loader/webpack", "babel-loader", ], exclude: path.resolve(__dirname, "node_modules") }, { test: //.css$/, use: [ "style-loader", "css-loader", "postcss-loader" ] }, { test: //.less$/, use: [ "style-loader", "css-loader", "postcss-loader", "less-loader" ] }, { test: //.(gif|png|jpe?g)$/, use: [{ loader: "file-loader", options: { name: "static/img/[name].[ext]" } }] }, { test: //.(ttf|eot|svg|woff)(/?(/w|#)*)?$/, use: [{ loader: "file-loader", options: { name: "static/font/[name].[ext]" } }] } ] },.babelrc
{ "presets": ["es2015", "stage-0", "react"], "plugins": ["transform-decorators-legacy"]}transform-decorators-legacy 這個插件用來轉化es7 中的裝飾器，比如 autobind，connect 等 。
postcss.config.js
module.exports = { plugins: [ require('autoprefixer') ]}5. 插件
插件是webpack 中非常重要的一部分 。
5.1 HtmlWebpackPlugin 插件 。
自動生成html文件，并自動引入script文件 。有幾個頁面就要new 幾個插件， 自動引入同名的js文件。
const HtmlWebpackPlugin = require("html-webpack-plugin");new HtmlWebpackPlugin({ template: path.resolve(__dirname, "src/index.html"), name: "index", title: "webpack config cli", filename: "index.html", inject: true,}),5.2 CommonsChunkPlugin 插件將單獨的部分作為chunk 提出去，減小文件體積，這里的name 要和 entry中對應 。
new webpack.optimize.CommonsChunkPlugin({ name: 'vendor', filename: 'js/vendor.js'}),5.3 webpack 模塊熱替換插件 HotModuleReplacementPlugin
new webpack.HotModuleReplacementPlugin()
5.4 ExtractTextPlugin 分離css 文件
在這個插件加載以前，css 文件是放在js文件中，在解釋js時，將文本插入到style節點中 。
使用這個插件以后，就直接可以單獨分離css 文件 。
但是在開發環境中不要使用，會影響熱重載的速度。
ExtractTextPlugin 的插件配置相對復雜 。首先包裹loaders，注意這里已經不能再使用style-loader了，因為提取css的任務插件完成了 。當提取失敗時，使用style-loader 。
const ExtractTextPlugin = require("extract-text-webpack-plugin"); // loader部分 { test: //.css$/, use: ExtractTextPlugin.extract({ fallback: "style-loader", use: [ "css-loader", "postcss-loader" ] }) }, { test: //.less$/, use: ExtractTextPlugin.extract({ fallback: "style-loader", use: [ "css-loader", "postcss-loader", "less-loader" ] }) } // 插件部分 new ExtractTextPlugin({ filename: "css/index.css" }),6. 其他
extensions：用于省略后綴名
alias 處理別名 。
resolve: { extensions: [" ", ".js", ".jsx", ".css", ".less"], alias: { components: path.resolve(__dirname, 'src/components/'), css: path.resolve(__dirname, "src/css/"), model: path.resolve(__dirname, 'src/model/'), store: path.resolve(__dirname, 'src/store/') } }7.package.json
{ "name": "webpack-react-cli", "version": "1.0.0", "description": "", "main": "webpack.config.js", "scripts": { "test": "echo /"Error: no test specified/" && exit 1", "dev": "webpack-dev-server --open", "build": "webpack -w" }, "author": "", "license": "ISC", "devDependencies": { "autoprefixer": "^7.1.2", "babel-core": "^6.25.0", "babel-loader": "^7.1.1", "babel-plugin-transform-decorators-legacy": "^1.3.4", "babel-preset-es2015": "^6.24.1", "babel-preset-react": "^6.24.1", "babel-preset-stage-0": "^6.24.1", "css-loader": "^0.28.4", "extract-text-webpack-plugin": "^3.0.0", "file-loader": "^0.11.2", "html-webpack-plugin": "^2.30.1", "less": "^2.7.2", "less-loader": "^4.0.5", "postcss-loader": "^2.0.6", "style-loader": "^0.18.2", "webpack": "^3.0.0", "webpack-dev-server": "^2.5.0" }, "dependencies": { "babel-polyfill": "^6.23.0", "core-decorators": "^0.19.0", "prop-types": "^15.5.10", "react": "^15.6.1", "react-dom": "^15.6.1", "react-hot-loader": "^3.0.0-beta.7" }}以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
