webpack 1X 环境配置

开发环境的配置

var path = require('path');
var webpack = require('webpack');
var ExtractTextPlugin = require('extract-text-webpack-plugin'); //css单独打包
var HtmlWebpackPlugin = require('html-webpack-plugin'); //生成html


var ROOT_PATH = path.resolve(__dirname);
var APP_PATH = path.resolve(ROOT_PATH, 'src'); //__dirname 中的src目录，以此类推
var APP_FILE = path.resolve(APP_PATH, 'index.js'); //根目录文件app.jsx地址
var BUILD_PATH = path.resolve(ROOT_PATH, './build'); //发布文件所存放的目录

module.exports = {
    devtool: 'source-map',
    entry: {
        app: APP_FILE
    }, output: {
        // publicPath: 'public', //编译好的文件，在服务器的路径,这是静态资源引用路径
        path: BUILD_PATH, //编译到当前目录
        filename: 'static/js/[name][hash:8].js', //编译后的文件名字
        chunkFilename: 'static/js/[name].[chunkhash:5].min.js',
    }, module: {
        loaders: [
            {test: /\.js$/, exclude:/node_modules/, loader: 'babel-loader'},
            {test: /\.jsx$/, exclude: /node_modules/, loader: 'babel?presets[]=react&presets[]=es2015&presets[]=stage-0' },
            {test: /.css$/,  loader: ExtractTextPlugin.extract('style', 'css')},
            {test: /\.(jpg|png|jpeg|gif|svg)$/, loader: "url?limit=8192&name=static/img/[name].[ext]"},
            {test: /\.(woff|woff2|ttf|eot)$/, loader: 'file?limit=8192&name=static/file/[name].[ext]'},
            {test: /\.json$/,loader: 'json'}
            ]
    },resolve: {
        extensions: ['', '.es6','.js', '.jsx', '.json', '.css', '.less'],
        alias: {
            comp: path.join(__dirname, "./src/components"),
            style: path.join(__dirname, "./src/css"),
            img: path.join(__dirname, "./src/img"),
            view: path.join(__dirname, "./src")
        }
    },
    devServer: {
        port:8080,
        contentBase: 'public',// boolean | string | array, static file location
        compress: true, // enable gzip compression
        historyApiFallback: true, // true for index.html upon 404, object for multiple paths
        hot: true, // hot module replacement. Depends on HotModuleReplacementPlugin
        https: false, // true for self-signed, object for cert authority
        // noInfo: true, // only errors & warns on hot reload
    },
    plugins: [
        new webpack.DefinePlugin({
            'process.env': {
                NODE_ENV: JSON.stringify('development') //定义编译环境
            }
        }),
        new webpack.HotModuleReplacementPlugin(),
        new HtmlWebpackPlugin({  //根据模板插入css/js等生成最终HTML
            filename: 'index.html', //生成的html存放路径，相对于 path
            template: 'public/index.html', //html模板路径
            hash: false,
        }),
        new ExtractTextPlugin('static/css/[name].css')
    ]
};

生产环境配置

var path = require('path');
var webpack = require('webpack');
var ExtractTextPlugin = require('extract-text-webpack-plugin'); //css单独打包
var HtmlWebpackPlugin = require('html-webpack-plugin'); //生成html


var ROOT_PATH = path.resolve(__dirname);
var APP_PATH = path.resolve(ROOT_PATH, 'src'); //__dirname 中的src目录，以此类推
var APP_FILE = path.resolve(APP_PATH, 'index.js'); //根目录文件app.jsx地址
var BUILD_PATH = path.resolve(ROOT_PATH, './build'); //发布文件所存放的目录

module.exports = {
    devtool: 'cheap-module-eval-source-map',
    entry: {
        app: APP_FILE
    }, output: {
        publicPath: './', //编译好的文件，在服务器的路径,这是静态资源引用路径
        path: BUILD_PATH, //编译到当前目录
        filename: 'static/js/[name][hash:8].js', //编译后的文件名字
        chunkFilename: 'static/js/[name].[chunkhash:5].min.js',
    }, module: {
        loaders: [
            {test: /\.js$/, exclude:/node_modules/, loader: 'babel-loader'},
            {test: /\.jsx$/, exclude: /node_modules/, loader: 'babel?presets[]=react&presets[]=es2015&presets[]=stage-0' },
            {test: /.css$/,  loader: ExtractTextPlugin.extract('style', 'css')},
            {test: /\.(jpg|png|jpeg|gif|svg)$/, loader: "url?limit=8192&name=static/img/[name].[ext]"},
            {test: /\.(woff|woff2|ttf|eot)$/, loader: 'file?limit=8192&name=static/file/[name].[ext]'},
            {test: /\.json$/,loader: 'json'}
            ]
    },resolve: {
        extensions: ['', '.es6','.js', '.jsx', '.json', '.css', '.less'],
        alias: {
            comp: path.join(__dirname, "./src/components"),
            style: path.join(__dirname, "./src/css"),
            img: path.join(__dirname, "./src/img"),
            view: path.join(__dirname, "./src")
        }
    },
    plugins: [
        new HtmlWebpackPlugin({  //根据模板插入css/js等生成最终HTML
            filename: 'index.html', //生成的html存放路径，相对于 path
            template: 'public/index.html', //html模板路径
            hash: false,
        }),
        new ExtractTextPlugin('static/css/[name].css')
    ]
};

package.json,  我这里配置的是有react 和framework7的开发依赖不需要刻意删除

{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "devDependencies": {
    "react-scripts": "0.9.0"
  },
  "dependencies": {
    "framework7": "^1.5.3",
    "framework7-react": "^0.9.2",
    "react": "^15.4.2",
    "react-dom": "^15.4.2"
  },
  "scripts": { 
    "build": "webpack --config webpack.config.pro.js -p --progress --colors",
    "start": "webpack-dev-server --inline --progress --colors --hot --config webpack.config.dev.js"
  }
}