webpack3 的配置相对于webpack2 又有了一些新的变化，这里讲其记录下来，备查 。
package.json 的完整文件在结尾 。
1. 安装
rush:bash;">
npm init
yarn add webpack webpack-dev-server -D
2. 配置简单输入输出
webpack.config.js
rush: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
rush:js;">
devServer: {
hot: true,// 热重载
inline: true,// 启用inline 模式
port: 46480,contentBase: path.resolve(__dirname,proxy: {
"/api": {
target: "xxxxx",secure: false,// 处理https
changeOrigin: true,// 跨域
}
}
},
4. loaders
webpack 将所有的文件都当做js文件处理，所以配置加载器
4.1 安装loader
rush:plain;">
yarn add babel-loader less-loader post
css-loader
css-loader style-loader -D
yarn 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
rush: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","post
css-loader"
]
},{
test: /\.less$/,"post
css-loader","less-loader"
]
},{
test: /\.(gif|png|jpe?g)$/,use: [{
loader: "file-loader",options: {
name: "static/img/[name].[ext]"
}
}]
},{
test: /\.(ttf|eot|svg|woff)(\?(\w|#)*)?$/,options: {
name: "static/font/[name].[ext]"
}
}]
}
]
},
.babelrc
rush:plain;">
{
"presets": ["es2015","stage-0","react"],"plugins": ["transform-decorators-legacy"]
}
transform-decorators-legacy 这个插件用来转化es7 中的装饰器，比如 autobind，connect 等 。
postcss.config.js
rush:js;">
module.exports = {
plugins: [
require('a
utoprefixer')
]
}
插件是webpack 中非常重要的一部分 。
5.1 HtmlWebpackPlugin 插件 。
自动生成html文件，并自动引入script文件 。有几个页面就要new 几个插件， 自动引入同名的js文件。
rush:js;">
const HtmlWebpackPlugin = require("html-webpack-plugin");
new HtmlWebpackPlugin({
template: path.resolve(__dirname,"src/index.html"),name: "index",title: "webpack con
fig cli",filename: "index.html",inject: true,}),
5.2 CommonsChunkPlugin 插件将单独的部分作为chunk 提出去，减小文件体积，这里的name 要和 entry中对应 。
rush:js;">
new webpack.optimize.CommonsChunkPlugin({
name: '
vendor',filename: 'js/
vendor.js'
}),
5.3 webpack 模块热替换插件 HotModuleReplacementPlugin
rush:js;">
new webpack.HotModuleReplacementPlugin()
5.4 ExtractTextPlugin 分离css 文件
在这个插件加载以前，css 文件是放在js文件中，在解释js时，将文本插入到style节点中 。
使用这个插件以后，就直接可以单独分离css 文件 。
但是在开发环境中不要使用，会影响热重载的速度。
ExtractTextPlugin 的插件配置相对复杂 。首先包裹loaders，注意这里已经不能再使用style-loader了，因为提取css的任务插件完成了 。当提取失败时，使用style-loader 。
rush:js;">
const ExtractTextPlugin = require("extract-text-webpack-plugin");
// loader部分
{
test: /\.css$/,use: ExtractTextPlugin.extract({
fallback: "style-loader",use: [
"
css-loader","post
css-loader"
]
})
},"less-loader"
]
})
}
//
插件部分
new ExtractTextPlugin({
filename: "css/index.css"
}),
6. 其他
extensions：用于省略后缀名
alias 处理别名 。
rush:js;">
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
rush:js;">
{
"name": "webpack-react-cli","version": "1.0.0","description": "","main": "webpack.con
fig.js","scripts": {
"test": "echo \"Error: no test specified\" && exit 1","dev": "webpack-dev-server --open","build": "webpack -w"
},"author": "","license": "ISC","devDependencies": {
"a
utoprefixer": "^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","post
css-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"
}
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
