前言
引用原文：http://www.jianshu.com/p/42e11515c10f
由于原文是上年的了，将近一年的时间，webpack2.0也早出来的，总的来说还是很多变化的
于是在原文上做了一下修改
文件目录结构
目录结构
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的时候磕磕碰碰，虽然是没什么大问题，但是体验终究不爽，并且一般都要翻墙去找问题解决方法，虽然这里没有说怎么解决，但是起码是将我的配置文件贴出来，也算是方便自己以后忘记可以常看看吧，不喜勿喷，说了我是小白哈哈哈。至于之外的文件，看原文就好了。
网友评论