webpack前端配置文件备份

下面这份webpack配置文件是我使用的最多的一份,里面已经集成到有jquery与react了

1、package.json

  "devDependencies": {
    "autoprefixer": "^7.2.4",
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-preset-env": "^1.6.1",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "copy-webpack-plugin": "^4.3.1",
    "css-loader": "^0.28.8",
    "extract-text-webpack-plugin": "^3.0.2",
    "file-loader": "^1.1.6",
    "html-webpack-plugin": "^2.30.1",
    "html-withimg-loader": "^0.1.16",
    "node-sass": "^4.7.2",
    "postcss-loader": "^2.0.10",
    "purify-css": "^1.2.5",
    "purifycss-webpack": "^0.7.0",
    "sass-loader": "^6.0.6",
    "style-loader": "^0.19.1",
    "url-loader": "^0.6.2",
    "webpack": "^3.10.0",
    "webpack-dev-server": "^2.10.0"
  },
  "dependencies": {
    "jquery": "^3.2.1",
    "react": "^16.2.0",
    "react-dom": "^16.2.0"
  }


2、webpack.config.js

// 引入NodeJs的Path模块
const path = require('path');
const glob = require('glob');
 
const webpack = require('webpack');
const uglify = require('uglifyjs-webpack-plugin');
const htmlPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const PurifyCssPlugin = require('purifycss-webpack');
const copywebpackPlugin = require('copy-webpack-plugin');
 
console.log(encodeURIComponent(process.env.type));
 
process.env.type="dev"
if(process.env.type=="dev"){
    // 开发环境打包
    var webSite={
        publicPath:"http://127.0.0.1:1717/"
    }
}else{
    // 生产环境打包
    var webSite={
        publicPath:"https://ddl56.com/"
    }
}
 
// 为了方便自己查看,把插件里需要新建对象的部分单独拿出来
var htmlPlugins=new htmlPlugin({
    hash:true,
    filename:'index.html',
    template:'./src/index.html',
    minify:{
        removeAttributeQuotes:true
    }
});
 
module.exports={
    // 入口文件配置
    entry:{
        'index':'./src/index.js',
        jquery:'jquery',
        react:'react'
    },
    output:{
        filename:'js/index-[hash].js',
        path:path.resolve(__dirname,'dist'),
        publicPath:webSite.publicPath
    },
    //模块:例如解读CSS,图片如何转换,压缩
    module:{
        rules:[
            {
                test:/\.css/,
                // use:[{
                //     loader:'style-loader'
                // },{
                //     loader:'css-loader'
                // }]
                use: ExtractTextPlugin.extract({
                    fallback: "style-loader",
                    use: [{
                        loader:"css-loader"
                    },{
                        loader:"postcss-loader"
                    }]
                  })
            },
            {
                test:/\.(png|jpg|gif)/,
                use:[{
                    loader:'url-loader',
                    options:{
                        limit:500,
                        outputPath:"images/"
                    }
                }]
            },
            {
                test:/\.(html|htm)/i,
                use:[{loader:"html-withimg-loader"}]
            },
            {
                test:/\.scss/,
                use:ExtractTextPlugin.extract({
                    use:[{
                        loader:"css-loader"
                    },{
                        loader:"sass-loader"
                    }],
                    fallback:"style-loader"
                })
            },
            {
                test:/\.(jsx|js)$/,
                use:[{
                    loader:"babel-loader"
                }],
                exclude:/node_modules/
            }
        ]
    },
    //插件,用于生产模版和各项功能
    plugins:[
        // new uglify(),
        // new htmlPlugin({
        //     hash:true,
        //     filename:'index.html',
        //     template:'./src/index.html',
        //     minify:{
        //         removeAttributeQuotes:true
        //     }
        // }),
        new webpack.optimize.CommonsChunkPlugin({
            name:['jquery','react'],
            filename:'assets/js/[name].js',
            minChunks:2,
        }),
        new webpack.ProvidePlugin({
            $:'jquery'
        }),
        new copywebpackPlugin([{
            from:__dirname+'/src/assets',
            to:"./assets/images/"
        }]),
        htmlPlugins,
        new ExtractTextPlugin('css/index.css'),
        new PurifyCssPlugin({
            paths:glob.sync(path.join(__dirname,'src/*html'))
        }),
    ],
    // 配置webpack开发服务功能
    devServer:{
        //设置基本目录结构
        contentBase:path.resolve(__dirname,'dist'),
        //服务器的IP地址,可以使用IP也可以使用localhost
        host:'127.0.0.1',
        //服务端压缩是否开启
        compress:true,
        //配置服务端口号
        port:1717
    },
    // 配置--watch参数
    watchOptions:{
        poll:1000,
        aggregateTimeout:500,
        ignored:/node_modules/
    }
}

3、.babelrc

{
    "presets": [
        "react","env"
    ]
}

4、postcss.config.js

module.exports={
    plugins:[
        require('autoprefixer')
    ]
}

您可能会喜欢

发表评论

电子邮件地址不会被公开。 必填项已用*标注

+ 17 = 24