webpack3.0

webpack 前端工程自动化工具   当前版本3.10

安装 npm install  -g  webpack

npm install  webpack --save-dev   ||  cnpm install webpack --save-dev

1. 基本打包  命令 webpack       

webpack   src/entry.js  dist/bundle.js

2.入口和出口  

//ES6输出 dist 绝对路径
const path = require('path');
console.log(path.resolve(__dirname,'dist'));

配置多入口&多出口

const path = require('path');
// path.resolve(__dirname,'dist') 打印dist的绝对路径
module.exports={
    // 入口文件位置
    entry:{
        entry:'./src/entry.js',
        entry2:'./src/entry2.js'
    },
    // 出口文件位置
    output:{
         path:path.resolve(__dirname,'dist'),
        //name意思 是根据入口文件 打包的名称 打包出对应数量的 出口文件
         filename:'[name].js'
    },
    // 模块:例如 图片CSS less sass typescript 转化压缩
    module:{},
    // 插件,用于生产模块和各项功能
    plugins:[],
    // 配置webpack开发服务功能
    devServer:{}
}

3.热更新

cnpm install webpack-dev-server  --save-dev  安装webpack-dev-server

修改 package.json    

"scripts": {
"server": "webpack-dev-server"
}
const path = require('path');
// path.resolve(__dirname,'dist') 打印dist的绝对路径
module.exports={
    // 入口文件位置
    entry:{
        entry:'./src/entry.js',
        entry2:'./src/entry2.js'
    },
    // 出口文件位置
    output:{
         path:path.resolve(__dirname,'dist'),
        //name意思 是根据入口文件 打包的名称 打包出对应数量的 出口文件
         filename:'[name].js'
    },
    // 模块:例如 图片CSS less sass typescript 转化压缩
    module:{},
    // 插件,用于生产模块和各项功能
    plugins:[],
    // 配置webpack开发服务功能
    devServer:{
        // 设置基本目录结构
        contentBase:path.resolve(__dirname,'dist'),
        // 服务器的IP地址,可使用IP也可以用localhost
        host:'localhost',
        // 服务器压压缩是否开启 
        compress:true,
        // 配置服务端口号
        port:1717
    }
}
npm run server  启动后， 它有一种监控机制（也叫watch）。它可以监控到我们修改源码,并且立即在浏览器里给我们更新

4.模块:css文件打包

webpack在生产环境中有一个重要的作用就是减少http的请求数，就是把多个文件打包到一个js里,这样请求数就可以减少好多

Loaders 是webpack最重要的功能之一，他也是webpack如此盛行的原因，通过使用不通过的loader，webpack可以对不同的文件进行特定的处理

例如把 sass 转成 css ， ES67 转换成ES5 把REACT JSX转换成javascript代码

css打包 需要 安装两个包

npm install --save-dev style-loader

npm install --save-dev css-loader

//ES6输出 dist 绝对路径
const path = require('path');
// path.resolve(__dirname,'dist') 打印dist的绝对路径
module.exports={
    // 入口文件位置
    entry:{
        entry:'./src/entry.js',
        entry2:'./src/entry2.js'
    },
    // 出口文件位置
    output:{
         path:path.resolve(__dirname,'dist'),
        //name意思 是根据入口文件 打包的名称 打包出对应数量的 出口文件
         filename:'[name].js'
    },
    // 模块:例如 图片CSS less sass typescript 转化压缩
    module:{
        rules:[
            {
                test:/\.css$/,
                use:['style-loader','css-loader']
            }
        ]
    },
    // 插件,用于生产模块和各项功能
    plugins:[],
    // 配置webpack开发服务功能
    devServer:{
        // 设置基本目录结构
        contentBase:path.resolve(__dirname,'dist'),
        // 服务器的IP地址,可使用IP也可以用localhost
        host:'localhost',
        // 服务器压压缩是否开启 
        compress:true,
        // 配置服务端口号
        port:1717
    }
}

5.插件配置 js压缩

上线前JS需要压缩   webpack集成了一个压缩插件   uglifyjs-webpack-pligin  不需要 再次安装

引入const uglify = require('uglifyjs-webpack-plugin')

配置在 plugins:[ new uglify() ]  就可以了

//ES6输出 dist 绝对路径
const path = require('path');
// path.resolve(__dirname,'dist') 打印dist的绝对路径
//引入uglify
const uglify = require('uglifyjs-webpack-plugin');
module.exports={
    // 入口文件位置
    entry:{
        entry:'./src/entry.js',
        entry2:'./src/entry2.js'
    },
    // 出口文件位置
    output:{
         path:path.resolve(__dirname,'dist'),
        //name意思 是根据入口文件 打包的名称 打包出对应数量的 出口文件
         filename:'[name].js'
    },
    // 模块:例如 图片CSS less sass typescript 转化压缩
    module:{
        rules:[
            {
                test:/\.css$/,
                use:['style-loader','css-loader']
            }
        ]
    },
    // 插件,用于生产模块和各项功能
    plugins:[
        // 配置uglify
        new uglify()
    ],
    // 配置webpack开发服务功能
    devServer:{
        // 设置基本目录结构
        contentBase:path.resolve(__dirname,'dist'),
        // 服务器的IP地址,可使用IP也可以用localhost
        host:'localhost',
        // 服务器压压缩是否开启 
        compress:true,
        // 配置服务端口号
        port:1717
    }
}

6.HTML文件的打包

将src下的index.html打包到dist下 区分生产环境和开发环境

需要引入 html-webpack-plugin 

const htmlPlugin = require('html-webpack-plugin')

配置在plugins里

new htmlPlugin(

         minify:{

        removeAttributeQuotes:true

},hash:true,

   template:'./src/index.html'

)

//ES6输出 dist 绝对路径
const path = require('path');
// path.resolve(__dirname,'dist') 打印dist的绝对路径
//引入uglify
const uglify = require('uglifyjs-webpack-plugin');
// 引入 html-webpack-plugin
const htmlPlugin = require('html-webpack-plugin');
module.exports={
    // 入口文件位置
    entry:{
        entry:'./src/entry.js',
        entry2:'./src/entry2.js'
    },
    // 出口文件位置
    output:{
         path:path.resolve(__dirname,'dist'),
        //name意思 是根据入口文件 打包的名称 打包出对应数量的 出口文件
         filename:'[name].js'
    },
    // 模块:例如 图片CSS less sass typescript 转化压缩
    module:{
        rules:[
            {
                test:/\.css$/,
                use:['style-loader','css-loader']
            }
        ]
    },
    // 插件,用于生产模块和各项功能
    plugins:[
        // 配置uglify
        // new uglify(),
        new htmlPlugin({
            // 对html文件进行压缩 
            minify:{
                // 去掉属性的双引号
                removeAttributeQuotes:true
            },
            // 让开发中js有缓存效果,所以加入hash,这样可以有效避免缓存js
            hash:true,
            // 是要打包的html模板路径和文件名称
            template:'./src/index.html'
        })
    ],
    // 配置webpack开发服务功能
    devServer:{
        // 设置基本目录结构
        contentBase:path.resolve(__dirname,'dist'),
        // 服务器的IP地址,可使用IP也可以用localhost
        host:'localhost',
        // 服务器压压缩是否开启 
        compress:true,
        // 配置服务端口号
        port:1717
    }
}

7. css中的图片处理 

webpack 打包图片需要  file-loader&url-loader 

npm install --save-dev file-loader url-loader

file-loader

解决引用路径的问题，拿background样式引入背景图片来说，我们都知道，webpack最终会将各个模块打包成一个文件，因此我们样式的Url路径是相对入口html页面的，而不是相对于原始css文件所在的路径的，这就会导致图片引入失败，这个问题是用file-loader解决的，file-loader可以解析目录中的url引入(不仅限于css)根据我们的配置，将图片拷贝到相应的路径，再根据我们的配置，修改打包后的文件引入路径，使之指向正确的文件

url-loader

如果图片较多，会发很多http请求，会价格低页面性能，这个问题可以通过url-loader解决.url-loader会将引入的图片编码，生成dataUrl，相当于把图片数据翻译成一串字符打包到文件中,最终只需要引入这个文件就能访问图片了，当然，如果图片较大，编码会消耗性能。因此url-loader提供了一个limit参数,小于limit字节的文件会被转为DataURL,大于limit的还会使用file-loader进行copy

{
      // 匹配图片文件后缀名称
      test:/\.(png|jpg|gif)/,
      // 是指定使用的loader和loader的配置参数
           use:[{
    loader:'url-loader',
    options:{
    // 小于500000的文件打包成base64的格式写入js
    limit:500
                   }
                }]
}
//ES6输出 dist 绝对路径
const path = require('path');
// path.resolve(__dirname,'dist') 打印dist的绝对路径
//引入uglify
const uglify = require('uglifyjs-webpack-plugin');
// 引入 html-webpack-plugin
const htmlPlugin = require('html-webpack-plugin');
module.exports={
    // 入口文件位置
    entry:{
        entry:'./src/entry.js',
        entry2:'./src/entry2.js'
    },
    // 出口文件位置
    output:{
         path:path.resolve(__dirname,'dist'),
        //name意思 是根据入口文件 打包的名称 打包出对应数量的 出口文件
         filename:'[name].js'
    },
    // 模块:例如 图片CSS less sass typescript 转化压缩
    module:{
        rules:[
            {
                test:/\.css$/,
                use:['style-loader','css-loader']
            },{
                // 匹配图片文件后缀名称
                test:/\.(png|jpg|gif)/,
                // 是指定使用的loader和loader的配置参数
                use:[{
                    loader:'url-loader',
                    options:{
                        // 小于500000的文件打包成base64的格式写入js
                        limit:500
                    }
                }]
            }
        ]
    },
    // 插件,用于生产模块和各项功能
    plugins:[
        // 配置uglify
        // new uglify(),
        new htmlPlugin({
            // 对html文件进行压缩 
            minify:{
                // 去掉属性的双引号
                removeAttributeQuotes:true
            },
            // 让开发中js有缓存效果,所以加入hash,这样可以有效避免缓存js
            hash:true,
            // 是要打包的html模板路径和文件名称
            template:'./src/index.html'
        })
    ],
    // 配置webpack开发服务功能
    devServer:{
        // 设置基本目录结构
        contentBase:path.resolve(__dirname,'dist'),
        // 服务器的IP地址,可使用IP也可以用localhost
        host:'localhost',
        // 服务器压压缩是否开启 
        compress:true,
        // 配置服务端口号
        port:1717
    }
}

8.图片迈坑:css分离和图片路径处理

Extract Text Plugin 

npm install --save-dev extract-text-webpack-plugin  安装

const extractTextPlugin = require('extract-text-webpack-plugin')  引入

new extractTextPlugin('/css/index.css')  配置再 plugin

publicPath：是在webpack.config.js文件的output选项中，主要作用就是处理静态文件路径的。

var website ={

    publicPath:"http://192.168.1.108:1717/"
}

修改 module:{

        rules: [
            {
              test: /\.css$/,
              use: extractTextPlugin.extract({
                fallback: "style-loader",
                use: "css-loader"
              })
            },{
               test:/\.(png|jpg|gif)/ ,
               use:[{
                   loader:'url-loader',
                   options:{
                       limit:500000
                   }
               }]
            }
          ]
    },
//ES6输出 dist 绝对路径
const path = require('path');
// path.resolve(__dirname,'dist') 打印dist的绝对路径
//引入uglify
const uglify = require('uglifyjs-webpack-plugin');
// 引入 html-webpack-plugin
const htmlPlugin = require('html-webpack-plugin');
// 引入 extract-text-webpack-pluguin
const extractTextPlugin = require("extract-text-webpack-plugin");
var website ={
    publicPath:"http://192.168.1.9:1717/"
}
module.exports={
    // 入口文件位置
    entry:{
        entry:'./src/entry.js',
        entry2:'./src/entry2.js'
    },
    // 出口文件位置
    output:{
         path:path.resolve(__dirname,'dist'),
        //name意思 是根据入口文件 打包的名称 打包出对应数量的 出口文件
         filename:'[name].js',
         publicPath:website.publicPath
    },
    // 模块:例如 图片CSS less sass typescript 转化压缩
    module:{
        rules:[
            {
              test: /\.css$/,
              use: extractTextPlugin.extract({
                fallback: "style-loader",
                use: "css-loader"
              })
            },{
                // 匹配图片文件后缀名称
                test:/\.(png|jpg|gif)/,
                // 是指定使用的loader和loader的配置参数
                use:[{
                    loader:'url-loader',
                    options:{
                        // 小于500000的文件打包成base64的格式写入js
                        limit:500
                    }
                }]
            }
        ]
    },
    // 插件,用于生产模块和各项功能
    plugins:[
        // 配置uglify
        // new uglify(),
        new htmlPlugin({
            // 对html文件进行压缩 
            minify:{
                // 去掉属性的双引号
                removeAttributeQuotes:true
            },
            // 让开发中js有缓存效果,所以加入hash,这样可以有效避免缓存js
            hash:true,
            // 是要打包的html模板路径和文件名称
            template:'./src/index.html'
        }),new extractTextPlugin('/css/index.css')  
    ],
    // 配置webpack开发服务功能
    devServer:{
        // 设置基本目录结构
        contentBase:path.resolve(__dirname,'dist'),
        // 服务器的IP地址,可使用IP也可以用localhost
        host:'192.168.1.9',
        // 服务器压压缩是否开启 
        compress:true,
        // 配置服务端口号
        port:1717
    }
}

9.处理HTML中的图片

只有项目安装webpack，如何打包？

"scripts": {

    "server": "webpack-dev-server --open",
    "build":"webpack"
  },

html-withimg-loader

npm install html-withimg-loader --save-dev

{

    test: /\.(htm|html)$/i,
     use:[ 'html-withimg-loader']
}
//ES6输出 dist 绝对路径
const path = require('path');
// path.resolve(__dirname,'dist') 打印dist的绝对路径
//引入uglify
const uglify = require('uglifyjs-webpack-plugin');
// 引入 html-webpack-plugin
const htmlPlugin = require('html-webpack-plugin');
// 引入 extract-text-webpack-pluguin
const extractTextPlugin = require("extract-text-webpack-plugin");
var website ={
    publicPath:"http://192.168.1.9:1717/"
}
module.exports={
    // 入口文件位置
    entry:{
        entry:'./src/entry.js',
        entry2:'./src/entry2.js'
    },
    // 出口文件位置
    output:{
         path:path.resolve(__dirname,'dist'),
        //name意思 是根据入口文件 打包的名称 打包出对应数量的 出口文件
         filename:'[name].js',
         publicPath:website.publicPath
    },
    // 模块:例如 图片CSS less sass typescript 转化压缩
    module:{
        rules:[
            {
              test: /\.css$/,
              use: extractTextPlugin.extract({
                fallback: "style-loader",
                use: "css-loader"
              })
            },{
                // 匹配图片文件后缀名称
                test:/\.(png|jpg|gif)/,
                // 是指定使用的loader和loader的配置参数
                use:[{
                    loader:'url-loader',
                    options:{
                        // 小于500000的文件打包成base64的格式写入js
                        limit:500,
                        outputPath:'images/'
                    }
                }]
            },
            {
                test: /\.(htm|html)$/i,
                 use:['html-withimg-loader'] 
            }
        ]
    },
    // 插件,用于生产模块和各项功能
    plugins:[
        // 配置uglify
        // new uglify(),
        new htmlPlugin({
            // 对html文件进行压缩 
            minify:{
                // 去掉属性的双引号
                removeAttributeQuotes:true
            },
            // 让开发中js有缓存效果,所以加入hash,这样可以有效避免缓存js
            hash:true,
            // 是要打包的html模板路径和文件名称
            template:'./src/index.html'
        }),new extractTextPlugin('css/index.css')  
    ],
    // 配置webpack开发服务功能
    devServer:{
        // 设置基本目录结构
        contentBase:path.resolve(__dirname,'dist'),
        // 服务器的IP地址,可使用IP也可以用localhost
        host:'192.168.1.9',
        // 服务器压压缩是否开启 
        compress:true,
        // 配置服务端口号
        port:1717
    }
}

10.less 打包分离

npm install --save-dev less

npm install --save-dev less-loader

//非css分离写法
{
    test: /\.less$/,
    use: [{
           loader: "style-loader" // creates style nodes from JS strings
        }, {
            loader: "css-loader" // translates CSS into CommonJS
        , {
            loader: "less-loader" // compiles Less to CSS
        }]
}
// less 分离写法
{
            test: /\.less$/,
            use: extractTextPlugin.extract({
                use: [{
                    loader: "css-loader"
                }, {
                    loader: "less-loader"
                }],
                // use style-loader in development
                fallback: "style-loader"
            })
 }
//ES6输出 dist 绝对路径
const path = require('path');
// path.resolve(__dirname,'dist') 打印dist的绝对路径
//引入uglify
const uglify = require('uglifyjs-webpack-plugin');
// 引入 html-webpack-plugin
const htmlPlugin = require('html-webpack-plugin');
// 引入 extract-text-webpack-pluguin
const extractTextPlugin = require("extract-text-webpack-plugin");
var website ={
    publicPath:"http://192.168.1.9:1717/"
}
module.exports={
    // 入口文件位置
    entry:{
        entry:'./src/entry.js',
        entry2:'./src/entry2.js'
    },
    // 出口文件位置
    output:{
         path:path.resolve(__dirname,'dist'),
        //name意思 是根据入口文件 打包的名称 打包出对应数量的 出口文件
         filename:'[name].js',
         publicPath:website.publicPath
    },
    // 模块:例如 图片CSS less sass typescript 转化压缩
    module:{
        rules:[
            {
              test: /\.css$/,
              use: extractTextPlugin.extract({
                fallback: "style-loader",
                use: "css-loader"
              })
            },{
                // 匹配图片文件后缀名称
                test:/\.(png|jpg|gif)/,
                // 是指定使用的loader和loader的配置参数
                use:[{
                    loader:'url-loader',
                    options:{
                        // 小于500000的文件打包成base64的格式写入js
                        limit:500,
                        outputPath:'images/'
                    }
                }]
            },
            {
                test: /\.(htm|html)$/i,
                 use:['html-withimg-loader'] 
            },{
                test: /\.less$/,
                use: extractTextPlugin.extract({
                    use: [{
                        loader: "css-loader"
                    }, {
                        loader: "less-loader"
                    }],
                    // use style-loader in development
                    fallback: "style-loader"
                })
              }
        ]
    },
    // 插件,用于生产模块和各项功能
    plugins:[
        // 配置uglify
        // new uglify(),
        new htmlPlugin({
            // 对html文件进行压缩 
            minify:{
                // 去掉属性的双引号
                removeAttributeQuotes:true
            },
            // 让开发中js有缓存效果,所以加入hash,这样可以有效避免缓存js
            hash:true,
            // 是要打包的html模板路径和文件名称
            template:'./src/index.html'
        }),new extractTextPlugin('css/index.css')  
    ],
    // 配置webpack开发服务功能
    devServer:{
        // 设置基本目录结构
        contentBase:path.resolve(__dirname,'dist'),
        // 服务器的IP地址,可使用IP也可以用localhost
        host:'192.168.1.9',
        // 服务器压压缩是否开启 
        compress:true,
        // 配置服务端口号
        port:1717
    }
}

11.sass打包分离

先装node-sass  后装 sass-loader

后者依赖前者安装

npm install --save-dev node-sass  

npm install --save-dev  sass-loader

//css不拆分写法
{
                test: /\.scss$/,
                use: [{
                    loader: "style-loader" // creates style nodes from JS strings
                }, {
                    loader: "css-loader" // translates CSS into CommonJS
                }, {
                    loader: "sass-loader" // compiles Sass to CSS
                }]
}
// css拆分写法 
{
                test: /\.scss$/,
                use: extractTextPlugin.extract({
                    use: [{
                        loader: "css-loader"
                    }, {
                        loader: "sass-loader"
                    }],
                    // use style-loader in development
                    fallback: "style-loader"
                })
            }
//ES6输出 dist 绝对路径
const path = require('path');
// path.resolve(__dirname,'dist') 打印dist的绝对路径
//引入uglify
const uglify = require('uglifyjs-webpack-plugin');
// 引入 html-webpack-plugin
const htmlPlugin = require('html-webpack-plugin');
// 引入 extract-text-webpack-pluguin
const extractTextPlugin = require("extract-text-webpack-plugin");
var website ={
    publicPath:"http://192.168.1.9:1717/"
}
module.exports={
    // 入口文件位置
    entry:{
        entry:'./src/entry.js',
        entry2:'./src/entry2.js'
    },
    // 出口文件位置
    output:{
         path:path.resolve(__dirname,'dist'),
        //name意思 是根据入口文件 打包的名称 打包出对应数量的 出口文件
         filename:'[name].js',
         publicPath:website.publicPath
    },
    // 模块:例如 图片CSS less sass typescript 转化压缩
    module:{
        rules:[
            {
              test: /\.css$/,
              use: extractTextPlugin.extract({
                fallback: "style-loader",
                use: "css-loader"
              })
            },{
                // 匹配图片文件后缀名称
                test:/\.(png|jpg|gif)/,
                // 是指定使用的loader和loader的配置参数
                use:[{
                    loader:'url-loader',
                    options:{
                        // 小于500000的文件打包成base64的格式写入js
                        limit:500,
                        outputPath:'images/'
                    }
                }]
            },
            {
                test: /\.(htm|html)$/i,
                 use:['html-withimg-loader'] 
            },{
                test: /\.less$/,
                use: extractTextPlugin.extract({
                    use: [{
                        loader: "css-loader"
                    }, {
                        loader: "less-loader"
                    }],
                    // use style-loader in development
                    fallback: "style-loader"
                })
              },
              {
                test: /\.scss$/,
                use: extractTextPlugin.extract({
                    use: [{
                        loader: "css-loader"
                    }, {
                        loader: "sass-loader"
                    }],
                    // use style-loader in development
                    fallback: "style-loader"
                })
            }
        ]
    },
    // 插件,用于生产模块和各项功能
    plugins:[
        // 配置uglify
        // new uglify(),
        new htmlPlugin({
            // 对html文件进行压缩 
            minify:{
                // 去掉属性的双引号
                removeAttributeQuotes:true
            },
            // 让开发中js有缓存效果,所以加入hash,这样可以有效避免缓存js
            hash:true,
            // 是要打包的html模板路径和文件名称
            template:'./src/index.html'
        }),new extractTextPlugin('css/index.css')  
    ],
    // 配置webpack开发服务功能
    devServer:{
        // 设置基本目录结构
        contentBase:path.resolve(__dirname,'dist'),
        // 服务器的IP地址,可使用IP也可以用localhost
        host:'192.168.1.9',
        // 服务器压压缩是否开启 
        compress:true,
        // 配置服务端口号
        port:1717
    }
}

12.postCss

npm install --save-dev postcss-loader autoprefixer

同级下建立

 

#test{
    width: 100px;
    height: 100px;
    background: rebeccapurple;
    transform: rotate(45deg);   
}
//建立postcss.config.js 文件 配置如下
module.exports={
    plugins:[
        require('autoprefixer')
    ]
}
 {
                test: /\.css$/,
                use: extractTextPlugin.extract({
                    fallback: 'style-loader',
                    use: [
                        { loader: 'css-loader', options: { importLoaders: 1 } },
                        'postcss-loader'
                    ]
                })
                
} 
//ES6输出 dist 绝对路径
const path = require('path');
// path.resolve(__dirname,'dist') 打印dist的绝对路径
//引入uglify
const uglify = require('uglifyjs-webpack-plugin');
// 引入 html-webpack-plugin
const htmlPlugin = require('html-webpack-plugin');
// 引入 extract-text-webpack-pluguin
const extractTextPlugin = require("extract-text-webpack-plugin");
var website ={
    publicPath:"http://192.168.1.9:1717/"
}
module.exports={
    // 入口文件位置
    entry:{
        entry:'./src/entry.js',
        entry2:'./src/entry2.js'
    },
    // 出口文件位置
    output:{
         path:path.resolve(__dirname,'dist'),
        //name意思 是根据入口文件 打包的名称 打包出对应数量的 出口文件
         filename:'[name].js',
         publicPath:website.publicPath
    },
    // 模块:例如 图片CSS less sass typescript 转化压缩
    module:{
        rules:[
            {
                test: /\.css$/,
                use: extractTextPlugin.extract({
                    fallback: 'style-loader',
                    use: [
                        { loader: 'css-loader', options: { importLoaders: 1 } },
                        'postcss-loader'
                    ]
                })
                
            } ,
           {
                // 匹配图片文件后缀名称
                test:/\.(png|jpg|gif)/,
                // 是指定使用的loader和loader的配置参数
                use:[{
                    loader:'url-loader',
                    options:{
                        // 小于500000的文件打包成base64的格式写入js
                        limit:500,
                        outputPath:'images/'
                    }
                }]
            },
            {
                test: /\.(htm|html)$/i,
                 use:['html-withimg-loader'] 
            },{
                test: /\.less$/,
                use: extractTextPlugin.extract({
                    use: [{
                        loader: "css-loader"
                    }, {
                        loader: "less-loader"
                    }],
                    // use style-loader in development
                    fallback: "style-loader"
                })
              },
              {
                test: /\.scss$/,
                use: extractTextPlugin.extract({
                    use: [{
                        loader: "css-loader"
                    }, {
                        loader: "sass-loader"
                    }],
                    // use style-loader in development
                    fallback: "style-loader"
                })
            }
        ]
    },
    // 插件,用于生产模块和各项功能
    plugins:[
        // 配置uglify
        // new uglify(),
        new htmlPlugin({
            // 对html文件进行压缩 
            minify:{
                // 去掉属性的双引号
                removeAttributeQuotes:true
            },
            // 让开发中js有缓存效果,所以加入hash,这样可以有效避免缓存js
            hash:true,
            // 是要打包的html模板路径和文件名称
            template:'./src/index.html'
        }),new extractTextPlugin('css/index.css')  
    ],
    // 配置webpack开发服务功能
    devServer:{
        // 设置基本目录结构
        contentBase:path.resolve(__dirname,'dist'),
        // 服务器的IP地址,可使用IP也可以用localhost
        host:'192.168.1.9',
        // 服务器压压缩是否开启 
        compress:true,
        // 配置服务端口号
        port:1717
    }
}

13. 消除无用的css

PurifyCSS

使用PurifyCSS可以大大减少CSS冗余，比如我们经常使用的BootStrap(140KB)就可以减少到只有35KB大小。这在实际开发当中是非常有用的。

安装PurifyCSS-webpack

从名字你就可以看出这是一个插件，而不是loader。所以这个需要安装还需要引入。 PurifyCSS-webpack要以来于purify-css这个包，所以这两个都需要安装。

这里的-D代表的是–save-dev ,只是一个简写。

引入glob

因为我们需要同步检查html模板，所以我们需要引入node的glob对象使用。在webpack.config.js文件头部引入glob。

const glob = require('glob');

引入purifycss-webpack

同样在webpack.config.js文件头部引入purifycss-webpack

const PurifyCSSPlugin = require("purifycss-webpack");

plugins:[
    //new uglify() 
    new htmlPlugin({
        minify:{
            removeAttrubuteQuotes:true
        },
        hash:true,
        template:'./src/index.html'
        
    }),
    new extractTextPlugin("css/index.css"),
    new PurifyCSSPlugin({
        // Give paths to parse for rules. These should be absolute!
        paths: glob.sync(path.join(__dirname, 'src/*.html')),
        })
 
]
//ES6输出 dist 绝对路径
const path = require('path');
// path.resolve(__dirname,'dist') 打印dist的绝对路径
//引入uglify
const uglify = require('uglifyjs-webpack-plugin');
// 引入 html-webpack-plugin
const htmlPlugin = require('html-webpack-plugin');
// 引入 extract-text-webpack-pluguin
const extractTextPlugin = require("extract-text-webpack-plugin");
const glob = require('glob');
const PurifyCSSPlugin = require("purifycss-webpack");
var website ={
    publicPath:"http://192.168.1.9:1717/"
}
module.exports={
    // 入口文件位置
    entry:{
        entry:'./src/entry.js',
        entry2:'./src/entry2.js'
    },
    // 出口文件位置
    output:{
         path:path.resolve(__dirname,'dist'),
        //name意思 是根据入口文件 打包的名称 打包出对应数量的 出口文件
         filename:'[name].js',
         publicPath:website.publicPath
    },
    // 模块:例如 图片CSS less sass typescript 转化压缩
    module:{
        rules:[
            {
                test: /\.css$/,
                use: extractTextPlugin.extract({
                    fallback: 'style-loader',
                    use: [
                        { loader: 'css-loader', options: { importLoaders: 1 } },
                        'postcss-loader'
                    ]
                })
                
            } ,
           {
                // 匹配图片文件后缀名称
                test:/\.(png|jpg|gif)/,
                // 是指定使用的loader和loader的配置参数
                use:[{
                    loader:'url-loader',
                    options:{
                        // 小于500000的文件打包成base64的格式写入js
                        limit:500,
                        outputPath:'images/'
                    }
                }]
            },
            {
                test: /\.(htm|html)$/i,
                 use:['html-withimg-loader'] 
            },{
                test: /\.less$/,
                use: extractTextPlugin.extract({
                    use: [{
                        loader: "css-loader"
                    }, {
                        loader: "less-loader"
                    }],
                    // use style-loader in development
                    fallback: "style-loader"
                })
              },
              {
                test: /\.scss$/,
                use: extractTextPlugin.extract({
                    use: [{
                        loader: "css-loader"
                    }, {
                        loader: "sass-loader"
                    }],
                    // use style-loader in development
                    fallback: "style-loader"
                })
            }
        ]
    },
    // 插件,用于生产模块和各项功能
    plugins:[
        // 配置uglify
        // new uglify(),
        new htmlPlugin({
            // 对html文件进行压缩 
            minify:{
                // 去掉属性的双引号
                removeAttributeQuotes:true
            },
            // 让开发中js有缓存效果,所以加入hash,这样可以有效避免缓存js
            hash:true,
            // 是要打包的html模板路径和文件名称
            template:'./src/index.html'
        }),
        new extractTextPlugin('css/index.css'),
        new PurifyCSSPlugin({
            // Give paths to parse for rules. These should be absolute!
            paths: glob.sync(path.join(__dirname, 'src/*.html')),
            })  
    ],
    // 配置webpack开发服务功能
    devServer:{
        // 设置基本目录结构
        contentBase:path.resolve(__dirname,'dist'),
        // 服务器的IP地址,可使用IP也可以用localhost
        host:'192.168.1.9',
        // 服务器压压缩是否开启 
        compress:true,
        // 配置服务端口号
        port:1717
    }
}

14. babel 转es6

 

posted @ 2018-01-15 02:34  且听风吟V  阅读(1002)  评论(0)  编辑  收藏  举报