webpack配置文件写法

/**
 * webpack开发阶段配置文件
 */
var path = require('path');
var webpack = require('webpack');

// 自动打开浏览器插件
var OpenBrowserPlugin = require('open-browser-webpack-plugin')

module.exports = {
    devtool: 'eval',
    entry: path.resolve(__dirname, 'src/js/app.js'),
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js',
        sourceMapFilename: '[name].map'
    },
    module: {
        rules: [
            // 处理js和jsx语法到es5
            {
                test: /\.jsx?$/,
                exclude: /node_modules/,
                use: [
                    {
                        loader: "babel-loader",
                        // options:{
                        //     presets: ['es2015', 'react']
                        // }
                    }
                ]

            },
            // 处理在js中引用css文件
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader'],
            },
            // 处理在js中引用scss文件
            {
                test: /\.scss$/,
                use: ['style-loader', 'css-loader', 'sass-loader'],
            },
            // 处理图片操作  25000bit ~3kb
            {
                test: /\.(png|jpg|jpeg|gif)$/,
                use: 'url-loader?limit=25000'
            },
            // 处理字体文件
            {
                test: /\.(eot|woff|ttf|woff2|svg)$/,
                use: 'url-loader?limit=25000'
            }
        ]
    },
    // resolve: {
    //     // 帮我们处理文件的扩展文件名，这个属性和热重载是冲突的
    //     extensions: ['', '.js', '.json', '.scss', 'jsx']
    // },
    devServer: {
        contentBase: __dirname + '/src',
        hot: true,
        inline:true, // 默认是true
        port:8080,
        host: 'localhost',
        historyApiFallback: true,
        noInfo: false,
        // stats: 'minimal',
        // publicPath: publicPath
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin(),
        new OpenBrowserPlugin({url: 'http://localhost:8080/', browser: 'chrome'})
    ]

}

var htmlwp = require('html-webpack-plugin');

module.exports={
  entry:'./src/main.js',  //指定打包的入口文件
  output:{
    path : __dirname+'/dist',  // 注意：webpack1.14.0 要求这个路径是一个绝对路径
    filename:'build.js'
  },
  module:{
    loaders:[
        {
            test: /\.css$/,  //打包 .css文件
            loader:'style-loader!css-loader'
        },
      {
        test: /\.scss$/,  //打包 .scss文件
        loader:'style-loader!css-loader!sass-loader'
      },
       {
        test: /\.less/,  //打包 .less文件
        loader:'style-loader!css-loader!less-loader'
      }
      ,
       {
        test: /\.(png|jpg|gif|ttf)$/,  //打包 url请求的资源文件
        loader:'url-loader?limit=20000' //limit表示图片的大小为20K是临界值，小于20K的图片均被打包到build.js中去，请求图片就会很快
      },
       {
        test: /\.js$/,  // 将.js文件中的es6语法转成es5语法
        loader:'babel-loader',
        exclude:/node_modules/ 
      },
       {
        test: /.vue$/,  // 解析 .vue 组件页面文件
        loader:'vue-loader' //
      }
    ]
  },
  babel:{
    presets:['es2015'],  // 配置将es6语法转换成es5语法
    plugins:['transform-runtime']
  },
    plugins:[
        new htmlwp({
          title: '首页',  //生成的页面标题<head><title>首页</title></head>
          filename: 'index.html', //webpack-dev-server在内存中生成的文件名称，自动将build注入到这个页面底部，才能实现自动刷新功能
          template: 'template.html' //根据index1.html这个模板来生成(这个文件请程序员自己生成)
        })
    ]
}

//webpack.publish.config.js
/**
 * webpack发布阶段你的配置文件
 */
var path = require('path');
var webpack = require('webpack');

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

module.exports = {
    devtool: 'source-map',
    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',
        sourceMapFilename: '[name].map'
    },
    module: {
        rules: [
            // 处理js和jsx语法到es5
            {
                test: /\.jsx?$/,
                exclude: /node_modules/,
                use: "babel-loader"
            },
            // 处理在js中引用css文件
            {
                test: /\.css$/,
                use: ExtractTextPlugin.extract({
                    fallbackLoader: "style-loader",
                    loader: "css-loader"
                })
            },
            // 处理在js中引用scss文件
            {
                test: /\.scss$/,
                use: ExtractTextPlugin.extract({
                    fallbackLoader: "style-loader",
                    loader: "css-loader!sass-loader"
                })
            },
            // 处理图片操作  25000bit ~3kb
            {
                test: /\.(png|jpg|jpeg|gif)$/,
                use: 'url-loader?limit=25000&name=images/[name].[ext]'
            },
            // 处理字体文件
            {
                test: /\.(eot|woff|ttf|woff2|svg)$/,
                use: 'url-loader?limit=25000&name=fonts/[name].[ext]'
            }
        ]
    },
    plugins: [
        // 删除文件夹的插件
        new CleanPlugin(['dist']),
        // 分离第三方应用的插件
        new webpack.optimize.CommonsChunkPlugin({name: 'vendors', filename: 'vendors.js'}),
        // 压缩混淆js代码插件
        new webpack.optimize.UglifyJsPlugin({
            beautify: false,
            mangle: {
                screw_ie8: true,
                keep_fnames: true
            },
            compress: {
                warnings: false,
                screw_ie8: true
            },
            comments: false
        }),
        new ExtractTextPlugin("app.css"),
        // 自动生成html插件
        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({
            'process.env':{
                NODE_ENV:'"production"'
            }
        })

    ]

}

zhengwei1949 / myblog

webpack配置文件写法 #78