webpack3.X学习

webpack demo

//webpack.config.jsconst path = require('path')const uglify = require('uglifyjs-webpack-plugin') //引进压缩插件const htmlPlugin = require('html-webpack-plugin') //引进html打包插件const extractTextPlugin = require('extract-text-webpack-plugin') //引进css分离插件const glob = require('glob') //规则模块，使用正则匹配获取对应规则的文件const PurifyCSSPlugin = require("purifycss-webpack") //引进消除无用css插件let websit = {    publicPath: "http://192.168.2.153:1111/"}module.exports = {    entry: { //入口,当需要打包多个js文件时，就需要配置多个入口文件
        entry: './src/entry.js',        entry2: './src/entry.js'
    },    output: { //输出
        path: path.resolve(__dirname, 'dist'),        filename: '[name].js', //name为entry对象里属性key来取输出口文件名称
        publicPath: websit.publicPath //配置公共路径，这样在打包html时，所有引用的文件（css\js）全部都会使用配置的公共路径，就不会造成引用路径地址不正确的问题
    },    module: { //css,图片转换，压缩都在这里配置   
        rules: [ //规则，数组形式，因为可以配置多个规则
            { //可以设定4个参数，test、use为必需，indude/exindude、query为可选
                test: /\.css$/, //打包css文件
                use: ['style-loader', 'css-loader', 'postcss-loader']                //indude/exindude   是指手动配置哪些文件需要处理
                //query 
            },
            { //背景图片打包
                test: /\.(jpg|png|gif)/,                use: [{                    loader: 'url-loader',                    options: {                        limit: 5000, //图片大于5000kb，转换为64位编码
                        outputPath: 'images/' //打包后输出的位置
                    }
                }]
            },
            { //img标签图片插件，webpack不支持使用img标签引入图片，所以需要使用国人做的loader去配置
                test: /\.(htm|html)$/i,                use: ["html-withimg-loader"]
            },
            { //打包并分离less
                test: /\.less$/,                use: extractTextPlugin.extract({                    use: [{                        loader: "css-loader"
                    }, {                        loader: "less-loader"
                    }],                    fallback: "style-loader"
                })
            },
            { //打包并分离sass
                test: /\.scss$/,                use: extractTextPlugin.extract({                    use: [{                        loader: "css-loader"
                    }, {                        loader: "sass-loader"
                    }],                    fallback: "style-loader"
                })
            },
            {   //babel转化ES678和react的jsx文件
                test: /\.(jsx|js)$/,                use: {                    loader: 'babel-loader'
                },                exclude: /node_modules/ //忽略，正则匹配该文件不参与转化
            }
        ]
    },    plugins: [ //插件
        new uglify() //js代码压缩
        new htmlPlugin({ //html文件打包
            minify: { //去除html文件引用地址中的""引号
                removeAttributeQuotes: true
            },            hash: true, //为文件添加哈希值，防止因为缓存的原因导致，浏览器无法触发刷新
            template: './src/index.html' //模版文件地址
        }),        new PurifyCSSPlugin({ //消除沉余css插件
            paths: glob.sync(path.join(__dirname, 'src/*.html')) //使用glob.sync同步遍历获取对应规则文件
        })
    ],    devServer: { //配置webpack开发服务
        contentBase: path.resolve(__dirname, 'dist'), //基本目录结构，指启动后服务器指向位置
        compress: true, //服务器压缩服务
        host: '192.168.10.102',        port: 888
    }
}

webpackServer：

• 步骤：

1. npm install webpack-dev-server --save-dev

2. 通过package.json里的scripts添加"server": "webpack-dev-server"脚本进行启动（因为我们是安装在项目文件的node_modules里，并没有添加到环境变量中，所以无法通过全局启动）

css文件打包配置：

• 步骤：

1. npm install style-loader css-loader --save-dev

2. 在webpack.config.js的module中进行设置

module模块引入方式有三种:
    1.
        {            test:/\.css$/,
            use:['style-loader', 'css-loader']
        }

    2.
        {            test: /\.css$/,
            loader: ['style-loader', 'css-loader']
        }

    3.这种方式比较常用
        {            test: /\.css$/,
            use:[{
                loader: "style-loader"
            },{                loader: "css-loader"
            }]
        }

html文件打包配置

• 步骤：

1. npm install --save-dev html-webpack-plugin

2. 在plugins中配置相关信息

3. requeire('html-webpack-plugin')

图片打包配置(只适用于背景图片)

• 步骤：

1. npm install --save-dev url-loader

2. 在module中进行配置

ps：有两个图片处理的模块(file-loader、url-loader)，但只需要使用url-loader模块就可以，因为它包含了file-loader的功能

img标签图片打包配置

• 步骤：

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

2. 在module中进行配置

css分离配置和publicPath

• 步骤：

1. npm install --save-dev extract-text-webpack-plugin

2. requeire('extract-text-webpack-plugin')

3. 需要更改三个地方：

let websit = {    publicPath: "http://192.168.2.153:1111/"}

output: {    path: path.resolve(__dirname, 'dist'),    filename: '[name].js',    publicPath: websit.publicPath //1.配置公共路径，这样在打包html时，所有引用的文件（css\js）全部都会使用配置的公共路径，就不会造成引用路径地址不正确的问题}module: {        rules: [{            test: /\.css$/,            use: extractTextPlugin.extract({ //2.css分离模块配置
                fallback: "style-loader",                use: "css-loader"
            })
        }]
    },    plugins: [        new extractTextPlugin("/css/index.css") //3.分离后，讲css放置在哪个文件夹中
    ]

less打包并分离

• 步骤：

1. npm install --save-dev less less-loader

2. 在module中进行配置

sass打包并分离

• 步骤：

1. npm install --save-dev node-sass sass-loader

2. 在module中进行配置

postcss自动添加前缀

• 步骤：

1. npm install --save-dev postcss-loader autoprefixer

2. 在和webpack.config.js同级目录下创建新文件postcss.config.js

//postcss.config.jsmodule.exports = { //配置postcss插件
    plugins: [
        require('autoprefixer')
    ]
}

1. 在module中进行配置

postcss配置详细参数说明

消除沉余（未使用）css

• 步骤：

1. npm i -D purifycss-webpack purify-css

2. require('glob')  &&  require("purifycss-webpack")

3. 在plugins中配置

ps：PurifyCSS（消除沉余css插件）必须配合extract-text-webpack-plugin（css分离插件）使用，否则会报错

ES678和react（jsx）转化工具

• 步骤

1. npm install --save-dev babel-core babel-loader babel-preset-env babel-preset-react

2. 在webpack.config.js同级目录下创建.babelrc文件

//.babelrc{    "presets": [        "env",        "react"
    ]
}

1. 在module中进行配置

webpack打包后调试代码

• 在webpack.config.js添加devtool

  • source-map:在一个单独文件中产生一个完整且功能完全的文件。这个文件具有最好的source map,但是它会减慢打包速度；

  • cheap-module-source-map:在一个单独的文件中产生一个不带列映射的map，不带列映射提高了打包速度，但是也使得浏览器开发者工具只能对应到具体的行，不能对应到具体的列（符号）,会对调试造成不便。

  • eval-source-map:使用eval打包源文件模块，在同一个文件中生产干净的完整版的sourcemap，但是对打包后输出的JS文件的执行具有性能和安全的隐患。在开发阶段这是一个非常好的选项，在生产阶段则一定要不开启这个选项。

  • cheap-module-eval-source-map:这是在打包文件时最快的生产source map的方法，生产的 Source map 会和打包后的JavaScript文件同行显示，没有影射列，和eval-source-map选项具有相似的缺点。

  • 在配置devtool时，webpack给我们提供了四种选项。

四种打包模式，有上到下打包速度越来越快，不过同时也具有越来越多的负面作用，较快的打包速度的后果就是对执行和调试有一定的影响。

image.png

• 如何调试
  

  

  image.png

  
  

  

  image.png

  
  启动webpack server服务后打开控制台
  

  

  image.png

作者：饥人谷_米弥轮
链接：https://www.jianshu.com/p/afc9dc4146c7