5分钟入门webpack

    我们知道如果想要开发react我们的webpack是必须的，接下来我们一步一步的来介绍

     1.先全局安装npm install webpack -g全局安装

      2.创建配置文件

            （1）webpack.base.config.js  //公用的配置放在这里面（可通过插件继承）
    （2）webpack.develop.config.js  //开发环境中用到的配置文件
    （3）webpack.publish.config.js   //生产环境中用到的配置文件

    3.最重要的一步千万别忘记安装到npm的环境中

    4.npm run develop

    5,接下来是配置文件的内容

    /**
* 项目开发环境配置文件
*/
var path = require('path');
// 自动打开浏览器插件
var OpenBrowserPlugin = require('open-browser-webpack-plugin');

module.exports = {
// entry:path.resolve(__dirname,'src/js/app.js'),
entry:[
'webpack/hot/dev-server',
'webpack-dev-server/client?http://localhost:8080',
path.resolve(__dirname,'src/js/app.js')
],
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js',
},
eslint: {
configFile: '.eslintrc.js'
},
module: {
preLoaders: [
{ test: /\.js$/, loader: "eslint-loader", exclude: /node_modules/ }
],
loaders: [
// 处理jsx语法和ES6语法
{
test: /\.jsx?$/, // 用正则来匹配文件路径，这段意思是匹配 js 或者 jsx
loader: 'babel',// 加载模块 "babel" 是 "babel-loader" 的缩写
},
// {
// test: /\.js$/,
// loader: "eslint",
// exclude: /node_modules/
// },
// 处理在js中引用css
{
test: /\.css$/, // Only .css files
loader: 'style!css' // 如果有多个加载器，中间作用感叹号隔开，多个加载器是从右往左去执行
},
{
test: /\.scss$/,
loader: 'style!css!sass'
},
// 1kb=1024b 1b=8bit 25000bit~3kb
{
test: /\.(png|jpg|jpeg|gif)$/,
loader: 'url?limit=25000'
},
{
test: /\.(eot|woff|ttf|woff2|svg)$/,
loader: 'url'
}

]
},
resolve: {
// 自动扩展文件后缀名，意味着我们require模块可以省略不写后缀名
// 注意一下, extensions 第一个是空字符串! 对应不需要后缀的情况.
extensions: ['', '.js', '.json', '.scss', '.jsx']
// 模块别名定义，方便后续直接引用别名，无须多写长长的地址。后续直接 require('AppStore') 即可
//alias: {
// AppStore: 'js/stores/AppStores.js',
// ActionType: 'js/actions/ActionType.js',
// AppAction: 'js/actions/AppAction.js'
//}
},
plugins: [
new OpenBrowserPlugin({url: 'http://localhost:8080/', browser: 'chrome'})
]

}

/**
* 项目部署环境配置文件
*/

var path = require('path');
var webpack = require('webpack')
// 抽取css的第三方插件
var ExtractTextPlugin = require("extract-text-webpack-plugin");
// 自动生成index.html页面插件
var HtmlWebpackPlugin = require('html-webpack-plugin');
// 删除文件夹
var CleanPlugin = require('clean-webpack-plugin');

module.exports = {
entry: {
app: path.resolve(__dirname, 'src/js/app.js'),
vendors: ['react', 'react-dom','react-router']
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js',
// // 为了做代码的异步加载
// publicPath:'/',
// chunkFilename: '[name]_[chunkhash:8]_chunk.js'
},
module: {
loaders: [
// 处理jsx语法和ES6语法
{
test: /\.jsx?$/, // 用正则来匹配文件路径，这段意思是匹配 js 或者 jsx
loader: 'babel',// 加载模块 "babel" 是 "babel-loader" 的缩写
},
{
test: /\.css$/, // Only .css files
loader: ExtractTextPlugin.extract("style-loader", "css-loader")
},
{
test: /\.scss$/,
loader: ExtractTextPlugin.extract("style-loader", "css-loader!sass-loader")
},
// 1kb=1024b 1b=8bit   25000bit~3kb
{
test: /\.(png|jpg|jpeg|gif)$/,
loader: 'url?limit=25000&name=images/[name].[ext]'
},
{
test: /\.(eot|woff|ttf|woff2|svg)$/,
loader: 'url'
}

]
},
resolve: {
// 自动扩展文件后缀名，意味着我们require模块可以省略不写后缀名
// 注意一下, extensions 第一个是空字符串! 对应不需要后缀的情况.
extensions: ['', '.js', '.json', '.scss', '.jsx'],
// 模块别名定义，方便后续直接引用别名，无须多写长长的地址。后续直接 require('AppStore') 即可
// alias: {
//     ReactJS:"node_modules/react/react.min.js",
//    AppStore: 'js/stores/AppStores.js',
//    ActionType: 'js/actions/ActionType.js',
//    AppAction: 'js/actions/AppAction.js'
// }
},
// 在这个属性里面定义的包是不会被打包进bundle。js文件中的,如果你要用这个属性，别忘了在index。html中引入cdn
// externals: {
//    // 配置了这个属性之后react和react-dom这些第三方的包都不会被构建进js中，那么我们就需要通过cdn进行文件的引用了
//    // 前边这个名称是在项目中引用用的，相当于import React from  ‘react1’中的react，
//    //'react1':"react",
//    'react1':"react",
//    'react-dom1':"react-dom",
//     '$1':"jQuery"
//
// },
plugins: [
// 构建之前先删除dist目录下面的文件夹
new CleanPlugin(['dist']),
// 分离第三方应用插件,name属性会自动指向entry中vendros属性，filename属性中的文件会自动构建到output中的path属性下面
new webpack.optimize.CommonsChunkPlugin({name: 'vendors', filename: 'vendors.js'}),
// 用webpack压缩代码，可以忽略代码中的警告
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
}
}),
// 可以新建多个抽离样式的文件，这样就可以有多个css文件了。
new ExtractTextPlugin("app.css"),
// compiling our final assets
new HtmlWebpackPlugin({
template: './src/template.html',
htmlWebpackPlugin: {
"files": {
"css": ["app.css"],
"js": ["vendors.js","bundle.js"]
}
},
// 效果不大，情怀至上
// minify: {
//     removeComments: true,
//     collapseWhitespace: true,
//     removeAttributeQuotes: true
// }
}),
new webpack.DefinePlugin({
//去掉react中的警告，react会自己判断
'process.env': {
NODE_ENV: '"production"'
}
}),
]
}

    接下来就可以进行开发了