webpack3.X初始配置

      发布在:Notes, 前端技术      评论:0 条评论
 const path=require('path');
    module.exports={
        entry:{//配置文件入口
            entry:'./src/entry.js',
            entry2:'./src/entry2.js'
        },
        output:{//配置文件出口
            path:path.resolve(__dirname,'dist'),
            filename:'[name].js'
        },
        module:{},//模块:例如解读CSS,图片如何转换,压缩
        plugins:[],//插件,用于生产模版和各项功能
        devServer:{}//配置webpack开发服务功能
    }
        devServer:{
            contentBase:path.resolve(__dirname,'dist'),
            host:'192.168.0.100',//本地IPv4地址
            compress:true,//是否启用服务器压缩
            port:8989
        }
    module:{
            rules:[
                {
                    test:/\.css$/,
                    use:['style-loader','css-loader']
                    //loader:['style-loader','css-loader']
                    //use:[
                       {
                       loader:"style-loader"
                       },{
                       loader:"css-loader"
                        }
                       ]
                }
            ]
        }
new htmlPlugin({
                minify:{
                    removeAttributeQuotes:true
                },
                hash:true,
                template:'./src/index.html'
            })

换成

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

plugins注册:new extractTextPlugin("css/index.css")
- css分离后可能导致图片不能显示,需要把路径改成绝对路径,配置一个publicPath:

var website={
    publicPath:"http://192.168.0.100:8989/"
}

output出口中配置:publicPath:website.publicPath
- 如果局部安装了webpack怎么直接webpack打包?在package.json配置:

"scripts": {
"build":"webpack"}

然后直接npm run build即可
- 如何打包html里的img标签?
安装npm install --save-dev html-withimg-loader
webpack.config.js的module>rules里加入:

        {
                test: /\.(htm|html)$/i,
                use:[ 'html-withimg-loader']
            }

这样html的文件就会被打包了。
- 打包和分离less
安装lessnpm install --save-dev less
安装less-loadernpm install --save-dev less-loader
打包less:webpack.config.js的module>rules里加入:

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

- 打包和分离sass
安装sass-loadernpm install --save-dev less-loader
配置方法和less基本一样 需要注意的是test写正则的时候,sass的文件后缀是scss,所以test正则需要写成scss。

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

在webpack.config.js的loader里引入更改css打包规则:

{
  test: /\.css$/,
  use: [
        {
          loader: "style-loader"
        }, {
          loader: "css-loader",
          options: {
             modules: true
          }
        }, {
          loader: "postcss-loader"
        }
  ]}

简化写法:

{
    test: /\.css$/,
    use: extractTextPlugin.extract({
        fallback: 'style-loader',
        use: [
            { loader: 'css-loader', options: { importLoaders: 1 } },
            'postcss-loader'
        ]
    })
}
new PurifyCSSPlugin({
            paths:glob.sync(path.join(__dirname,'src/*.html'))//搜索html的DOM结构
        })

原理:搜索匹配htmlDOM里的所有类名和id,然后对照css表里 没有使用的类名和id自动删除不加入dist的index.css
- Babel转换ES6
Babel能转换ES6 ES7等 需要很多依赖包
分别是npm install -D babel-core babel-loader babel-preset-es2015 babel-preset-react 依次:babel核心功能、babel的webpack包、babel解析es2015包、babel解析react包 babel官方说babel解析的es2015已经过时了,所以安装npm install -D babel-preset-env
在webpack.config.js里的module>rules加入

{
                test:/\.(jsx|js)$/,
                use:{
                    loader:'babel-loader',
                },
                exclude:/node_modules/      //需要排除的文件夹 npm里的包不能去转换
            }

然后在项目里新建一个文件专门用来配置babel:.babelrc
.babelrc里写入类json的对象

{
  "presets":["react","env"]//env代表所有的es版本 如果只解析es2015,则单独填入es2015即可。
}
Responses