之前用过一次webpack1.0构建过前端项目，github地址

新建了两个群，顺便打一波小广告：nodejs技术交流群：群号:209530601；React技术栈：群号:398240621

OK，可是正文，发现webpack2.0变化还是蛮大的，所以这里简单记录下：

关于webpack的基本使用，可以参看我另一篇文章

因为后端我用的nodejs，所以前端放在views里面，大致结构如下：

简单介绍，build存放着所有打包出来的文件，component存放所有的组件，lib里存放所有的资源文件，包括css，img等。大致如下。

下面是webpack.config.js的基本配置：

const path = require('path'),webpack = require('webpack'),HtmlWebpackPlugin = require('html-webpack-plugin'),//自动生成HTML文件ExtractTextPlugin = require('extract-text-webpack-plugin'),//提取css文件OpenBrowser = require('open-browser-webpack-plugin');const ROOT_PATH = path.resolve(__dirname);
const BUILD_PATH = path.resolve(ROOT_PATH, 'app/build');
const FILE_PATH = path.resolve(ROOT_PATH, 'app/resources');const entryFiles = {'index': path.resolve(FILE_PATH, './index/js/index'),'learningSummary': path.resolve(FILE_PATH, './learningSummary/js/learningSummary'),// 'demoWithPlugins':path.resolve(FILE_PATH,'.demoWithPlugins/js/demoWithPlugins'),// 'readingSentiment':path.resolve(FILE_PATH,'.readingSentiment/js/readingSentiment'),// 'lifeMiscellanies':path.resolve(FILE_PATH,'.lifeMiscellanies/js/lifeMiscellanies'),// 'aboutMe':path.resolve(FILE_PATH,'.aboutMe/js/aboutMe.jsx')
};const autoBuild = {entry:entryFiles,output: {path: BUILD_PATH,filename: '[hash].bundle.js',// publicPath:'/app/resources/'},plugins: [// new OpenBrowser({url:'http://localhost:9090'}),new HtmlWebpackPlugin({filename:'index.html',chunks: ['index'],title:'Nealyang'}),new HtmlWebpackPlugin({filename:'learningSummary.html',chunks: ['learningSummary']}),new ExtractTextPlugin('[hash].css'),new webpack.LoaderOptionsPlugin({pstcss:() => {return [require('precss'),require('autoprefixer')];}}),new webpack.ProvidePlugin({$:"jquery",jQuery:"jquery","window.jQuery":"jquery"})],module: {rules: [{test: /\.scss$/,use: ExtractTextPlugin.extract({fallback: 'style-loader',use: ['css-loader', 'sass-loader']}),},{test: /\.jsx?$/,exclude: /node_modules/,loaders: ['react-hot-loader','babel-loader'],include: [FILE_PATH]},{test: /\.(png|jpg|jpeg|gif)$/,loader: 'url-loader?limit=8192image-webpack'}]},resolve: {extensions: ['.js', '.jsx', '.less', '.scss', '.css'] //后缀名自动补全},devServer: {historyApiFallback: true,hot: true,inline: true,contentBase: './app/build',port: 9090},
};module.exports = autoBuild;

这里我不不知道为什么webpack2.0中热更新和open-brwser-plugin插件冲突，1.0中是可以的。

因为打算结构重构，加上react-router，并且webpack配置上按需加载以及生产环境和开发环境的不同打包配置，所以这里暂时不多细说。

后面会放最终配置代码。

目前实现react的编译热更新，文件的打包等基本功能