前言
引用原文：http://www.itdecent.cn/p/42e11515c10f
由于原文是上年的了，將近一年的時間，webpack2.0也早出來的，總的來說還是很多變化的
于是在原文上做了一下修改
文件目錄結(jié)構(gòu)
目錄結(jié)構(gòu)
webpack.config.js文件
var webpack = require('webpack')
var autoprefixer = require('autoprefixer')
var HtmlWebpackPlugin = require('html-webpack-plugin')
var ExtractTextPlugin = require('extract-text-webpack-plugin')
module.exports = {
devtool: 'eval-source-map',
entry: __dirname + '/app/main.js',
output: {
path: __dirname + '/build',
filename: '[name]-[hash].js'
},
module: {
loaders: [
{
test: /\.json$/,
loader: 'json-loader'
},
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader'
},
{
test: /\.css/,
loader: 'style-loader!css-loader?modules!postcss-loader'
}
]
},
plugins: [
new webpack.LoaderOptionsPlugin({
test: /\.css$/,
options: {
postcss: function () {
return [autoprefixer]
}
}
}),
new webpack.HotModuleReplacementPlugin(),
new webpack.BannerPlugin("Maosheng."),
new HtmlWebpackPlugin({
template: __dirname + "/app/index.tmpl.html"
}),
new webpack.optimize.OccurrenceOrderPlugin(),
new webpack.optimize.UglifyJsPlugin(),
new ExtractTextPlugin("[name]-[hash].css")
],
devServer: {
contentBase: './public',
historyApiFallback: true,
inline: true
}
}
postcss.config.js文件
module.exports = {
plugins: [
require('autoprefixer')()
]
}
.babelrc文件
{
"presets": ["react", "es2015"],
"env": {
"development": {
"plugins": [
[
"react-transform",
{
"transforms": [
{
"transform": "react-transform-hmr",
"imports": ["react"],
"locals": ["module"]
}
]
}
]
]
}
}
}
package.json文件
{
"name": "test",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "webpack-dev-server --inline",
"build": "webpack"
},
"author": "",
"license": "ISC",
"devDependencies": {
"autoprefixer": "^7.1.2",
"babel-core": "^6.25.0",
"babel-loader": "^7.1.1",
"babel-plugin-react-transform": "^2.0.2",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"css-loader": "^0.28.4",
"extract-text-webpack-plugin": "^3.0.0",
"html-webpack-plugin": "^2.29.0",
"json-loader": "^0.5.4",
"postcss-loader": "^2.0.6",
"react-transform-hmr": "^1.0.4",
"style-loader": "^0.18.2",
"webpack": "^3.2.0",
"webpack-dev-server": "^2.5.1"
},
"dependencies": {
"react": "^15.6.1",
"react-dom": "^15.6.1"
}
}
寫在后面
本人前端小白一枚, 把這些貼出來不過是與人方便, 想我按照原作者的教程學習webpack的時候磕磕碰碰，雖然是沒什么大問題，但是體驗終究不爽，并且一般都要翻墻去找問題解決方法，雖然這里沒有說怎么解決，但是起碼是將我的配置文件貼出來，也算是方便自己以后忘記可以?？纯窗?，不喜勿噴，說了我是小白哈哈哈。至于之外的文件，看原文就好了。
