首页 > 代码库 > webpack配置

webpack配置

webpack.config.js 配置

var webpack = require(webpack);
var path = require(path);
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var HtmlWebpackPlugin = require(html-webpack-plugin);
var CleanPlugin = require(clean-webpack-plugin); //清理文件夹

// css autoprefix  自动给 css 添加浏览器内核前缀
var precss = require(precss);
var autoprefixer = require(autoprefixer);

  const glob = require(glob);
// 注入所有src下以 -index.jsx结尾的文件
  const files = glob.sync(./src/js/*.js);
  const newEntries = files.reduce(function (memo, file) {
    // const name = path.basename(file, ‘.jsx‘);
    const name = file.replace(./src/js/, ‘‘).replace(.js, ‘‘);
    memo[name] = file;
    return memo;
  }, {});
  const entry = Object.assign({}, {
    index: [
            webpack-dev-server/client?http://localhost:8000,
            webpack/hot/only-dev-server,
            ./src/js/index.js
        ],
        lib:[ // 打包合并公共部分(公共资源与单文件分开打包)
          react, react-dom
        ]
  }, newEntries);

module.exports = {
    //页面入口文件配置
    entry:entry,
    // entry: {
    //     index: [
    //         ‘webpack-dev-server/client?http://localhost:8000‘,
    //         ‘webpack/hot/only-dev-server‘,
    //         ‘./src/js/index.js‘
    //     ],
    //     lib:[ // 打包合并公共部分(公共资源与单文件分开打包)
    //       ‘react‘, ‘react-dom‘
    //     ],
    //     index:‘./src/js/index.js‘,
    //     compnent:[‘./src/js/compnent/pageb.js‘,‘./src/js/lib/common.js‘],
    //     module1:‘./src/module1/module1.js‘,
    //     module2:‘./src/module2/module2.js‘,
    // },
    
    //入口文件输出配置
    output: {
        path: __dirname + /dist/,
        filename: js/[name].js,
        chunkFilename: "[id].js"
    },
    module: {
         // preLoaders:[{
         //    test: /\.(jsx|js)$/,
         //    loader: ‘eslint-loader‘,
         //    exclude: /node_modules/
         //  }],
        //加载器配置
        loaders: [
            {
                test: /\.css$/,
                loader: ExtractTextPlugin.extract({fallback:"style-loader", use:"css-loader"}) // css-loader 用于将 css 当做模块一样来 import  style-loader 用于自动将 css 添加到页面
            },

            {
                test: /\.less$/,
                loader: ExtractTextPlugin.extract({fallback:"style-loader", use:"css-loader!less-loader"})
            },

            {
                test: /\.js$/,
                loader: jsx-loader?harmony
            },

            //{ test: /\.scss$/, loader: ‘style!css!sass?sourceMap‘},
            {
                test: /\.(png|jpg)$/,
                loader: url-loader?limit=8192
            },

            {
                test: /\.js|jsx$/, 
                loaders: [babel-loader?presets[]=es2015,presets[]=react,presets[]=stage-0]
            },

            {
                test: /\.json$/,
                loader: json
            }, 

            {
                test: /\.html$/,
                loader: html?interpolate
            },

            {
                test: /\.js|jsx$/,
                loaders: [react-hot, babel-loader?presets[]=es2015,presets[]=react,presets[]=stage-0],
                include: path.join(__dirname, js)
            },

            {
                test: /\.(jsx|js)$/,
                loader: eslint-loader,
                exclude: /node_modules/
            },

            {
              test: /\.(?:jpg|gif|png|svg)$/,
              loaders: [
                url?limit=8000&name=img/[hash].[ext],
                image-webpack
              ]
            }
        ]
    },
    //其它解决方案配置
    resolve: {
        extensions: [.js, .jsx,.json, .scss , .css, .less]
    },
    //插件项
    plugins: [
        new webpack.HotModuleReplacementPlugin(), // 热更新
        new webpack.NoEmitOnErrorsPlugin(),
        new webpack.optimize.CommonsChunkPlugin({ name: lib, filename: js/common/lib.js }), // 打包公共资源
        new ExtractTextPlugin("css/[name].css"), // 打包css文件
        new HtmlWebpackPlugin({ // 生成html,将js及css等静态资源自动引入html,压缩html文件
            filename: index.html,
            //chunks: [‘src‘, ‘moudle1‘],
            minify: {
              collapseWhitespace: true,
              collapseInlineTagWhitespace: true,
              removeRedundantAttributes: true,
              removeEmptyAttributes: true,
              removeScriptTypeAttributes: true,
              removeStyleLinkTypeAttributes: true,
              removeComments: true
            }}),
        new webpack.optimize.UglifyJsPlugin({ // 压缩js,css资源
            compress: {
                // sourceMap: true,
                warnings: false
            }
        }),
        //清空输出目录
        new CleanPlugin([dist], {
            "root": path.resolve(__dirname, ./),
            verbose: true,
            dry: false
        }),
    ],

    
    //eslint 检查
     // eslint: {
     //     configFile: ‘./.eslintrc‘
     // }
};

 

webpack配置