美文网首页
webpack3模版

webpack3模版

作者: Eternal丶星空 | 来源:发表于2018-05-09 10:07 被阅读62次
 // const htmlPlugin=require('html-webpack-plugin');//需要安装
const extractTextPlugin=require('extract-text-webpack-plugin');
// const PurifyCSSPlugin=require('purifycss-webpack');

var website={
publicPath:'http://10.117.44.130:1717/'
    };

module.exports={ //模块导出
devtool:'source-map',
entry:{
    entry:'./src/entry.js'
},//入口配置项
output:{
    path:path.resolve(__dirname,'dist'),//会把一个路径或路径片段的序列解析为一个绝对路径。
    filename:'[name].js',
    // publicPath:website.publicPath
},//出口配置项
module:{
    rules:[  //规则
        {
            test:/\.css$/,   //用正则表达式来找到要处理的文件扩展名
            use:extractTextPlugin.extract({
                fallback:'style-loader',
                use:[{loader:'css-loader',options:{importLoaders:1}},
                'postcss-loader'
            ]
            })  //这是第一种写法//要用到的loader
        },
        {
            test:/\.(png|jpg|gif)$/,
            use:[{
                loader:"url-loader", //loader 不需要引入,插件需要引入
                options:{
                    limit:500, //如果图片大小超过了这个数值,复制图片的地址,小于则把图片转换为base64编码
                    outputPath:'images/' //图片存放的目录(文件夹)
                }
            }]
        },
        // {
        //     test:/\.(html|htm)$/i,
        //     use:['html-withimg-loader']
        // },
        // {
        //     test:/\.less$/,
        //     // use:[{
        //     //     loader:'style-loader' //按顺序加载
        //     // },
        //     // {
        //     //     loader:'css-loader'  //按顺序加载
        //     // },{
        //     //     loader:'less-loader' //按顺序加载,否则报错
        //     // }]
        //     use:extractTextPlugin.extract({
        //         use:[{
        //             loader:'css-loader'
        //         },{
        //             loader:'less-loader'
        //         }],
        //         fallback:'style-loader'
        //     })
        // },
        {
            test:/\.(jsx|js)$/,
            use:{
                loader:'babel-loader'
            },
            exclude:/node_modules/   //这里的不转换
        }
    ]
},//模块
plugins:[
    // new uglify(),
//     new htmlPlugin({
//         minify:{
//             removeAttributeQuotes:true //移除属性引号 id="a" => id=a
//         },
//         hash:true, //解决缓存问题
//         template:'./src/index.html' //模版
//     }),
    new extractTextPlugin('csssssaa/index.css'),
//     new PurifyCSSPlugin({
//         paths:glob.sync(path.join(__dirname,'src/*.html'))
//     })
],//插件
// devServer:{
//     contentBase:path.resolve(__dirname,'dist'),//热更新,基本目录结构
//     host:'10.117.44.130',//主机IP地址
//     compress:true,//服务器压缩参数,true(压缩),false
//     port:1717
// },//开发服务
   }

相关文章

网友评论

      本文标题:webpack3模版

      本文链接:https://www.haomeiwen.com/subject/zjcnrftx.html