webpack4学习(一)

大家都很熟悉了。如Vue，react等都用他打包，为了提高司机的开车体验，一下介绍一些30迈的飙车技巧，老司机勿喷

依赖

• 标识项目依赖， --save 上线开发都需要

• --save-dev 开发依赖，只有开发时使用

安装

npm install webpack webpack-cli -D
yarn add webpack webpack-cli -D

// 运行
npx webpack --mode development

webpack 可以0配置

• 打包工具 优化代码 模块化

npx (node 8.5以上)

• 临时安装可执行依赖包，不用全局安装，不用担心长期的污染。

• 可以执行依赖包中的命令，安装完成自动运行。

• 自动加载node_modules中依赖包，不用指定$PATH。

• 可以指定node版本、命令的版本，解决了不同项目使用不同版本的命令的问题。

配置npm执行文件

// 在package.json 中添加如下代码
{
    "scripts": {
        "build": "webpack"
    }
}

// 我们就可以通过 如下命令进行打包
npm run build || yarn run build

webpack配置

// 简单配置和模块功能解释
let path = require('path')

module.exports = {
    entry: './src/index.js', // 入口文件
    output: {
        filename: 'bundle.js',
        // 必须是绝对路径
        path: path.join(__dirname, 'dist')
    }, // 对象，输出
    module: {}, // 对象模块的处理，loader加载器
    plugins: [],// webpack对应的插件
    devServer: {}, // 开发服务配置
    mode: 'development' // 模式配置

}
// 通过以上配置，就可以使用命令npx webpack 打包文件了

多入口文件配置

多个入口文件是没有关系的，但是要打包到一起去，可以写成一个数组，实现多个文件打包成一个文件

let path = require('path')
// 假设我们有index.js 和a.js 需要打包成两个脚本，只需要将入口改写成数组即可，
// 代码如下
let HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
    entry: ['./src/index.js', './src/a.js'], // 入口文件
    output: {
        filename: 'bundle.js',
        // 必须是绝对路径
        path: path.join(__dirname, 'dist')
    }, // 对象，输出
    module: {}, // 对象模块的处理，loader加载器
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html'
        })
    ],// webpack对应的插件
    devServer: {}, // 开发服务配置
    mode: 'development' // 模式配置
}

配置打包html

HTML在的处理，大概有压缩，去注释，多页面, 需要依赖插件：html-webpack-plugin

let path = require('path')
let HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
    entry: ['./src/index.js', './src/a.js'], // 入口文件
    output: {
        filename: 'bundle.[hash:8].js',
        // 必须是绝对路径
        path: path.join(__dirname, 'dist')
    }, // 对象，输出
    module: {}, // 对象模块的处理，loader加载器
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html', // 用那个模板
            hash: true, // 为了防止缓存问题，添加一个MD5戳
            minify: {
                // collapseWhitespace: true, // 去除空格
                // removeAttributeQuotes: true, //
            }
        })
    ],// webpack对应的插件
    devServer: {}, // 开发服务配置
    mode: 'development' // 模式配置
}

配置清空不用的文件

依赖插件：clean-webpack-plugin, 配置如下

let path = require('path')
let HtmlWebpackPlugin = require('html-webpack-plugin')
let CleanWebpackPlugin = require('clean-webpack-plugin')
module.exports = {
    entry: ['./src/index.js', './src/a.js'], // 入口文件
    output: {
        filename: 'bundle.[hash:8].js',
        // 必须是绝对路径
        path: path.join(__dirname, 'dist')
    }, // 对象，输出
    module: {}, // 对象模块的处理，loader加载器
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html', // 用那个模板
            hash: true, // 为了防止缓存问题，添加一个MD5戳
            minify: {
                // collapseWhitespace: true, // 去除空格
                // removeAttributeQuotes: true, //
            }
        }),
        //  清楚废弃文件配置
        new CleanWebpackPlugin(['dist'])
    ],// webpack对应的插件
    devServer: {}, // 开发服务配置
    mode: 'development' // 模式配置
}

多页面开发， 如何配置多页面

和多入口配置有些类似，我们需要创建多个HtmlWebpackPlugin对象，进行配置即可，

chunks，配置文件引用

let path = require('path')
let HtmlWebpackPlugin = require('html-webpack-plugin')
let CleanWebpackPlugin = require('clean-webpack-plugin')
module.exports = {
    entry: { // 入口文件
        index: './src/index.js',
        a: './src/a.js'
    }, 
    output: {
        filename: '[name].[hash:8].js',
        // 必须是绝对路径
        path: path.join(__dirname, 'dist')
    }, // 对象，输出
    module: {}, // 对象模块的处理，loader加载器
    plugins: [
        new HtmlWebpackPlugin({
            filename: 'index.html', // 文件名
            template: './src/index.html', // 用那个模板
            hash: true, // 为了防止缓存问题，添加一个MD5戳
            chunks: ['index'], //设置对应关系 即引用的文件
            minify: {
                // collapseWhitespace: true, // 去除空格
                // removeAttributeQuotes: true, //
            }
        }),
        new HtmlWebpackPlugin({
            filename: 'a.html', // 文件名
            template: './src/a.html', // 用那个模板
            hash: true, // 为了防止缓存问题，添加一个MD5戳
            chunks: ['a', 'index'], //设置对应关系 即引用的文件
            minify: {
                // collapseWhitespace: true, // 去除空格
                // removeAttributeQuotes: true, //
            }
        }),
        //  清楚废弃文件配置
        new CleanWebpackPlugin(['dist'])
    ],// webpack对应的插件
    devServer: {}, // 开发服务配置
    mode: 'development' // 模式配置
}

配置开发服务器

嗯么么，谁都不喜欢改一次代码，重新刷新页面，那么webpack-dev-server来解救懒癌晚期的自己

let path = require('path')
let HtmlWebpackPlugin = require('html-webpack-plugin')
let CleanWebpackPlugin = require('clean-webpack-plugin')
let webpack = require('webpack')
module.exports = {
    entry: { // 入口文件
        index: './src/index.js',
        a: './src/a.js'
    }, 
    output: {
        filename: '[name].[hash:8].js',
        // 必须是绝对路径
        path: path.join(__dirname, 'dist')
    }, // 对象，输出
    module: {}, // 对象模块的处理，loader加载器
    plugins: [ // webpack对应的插件
        //热模块替换插件
        new webpack.HotModuleReplacementPlugin(),
        new HtmlWebpackPlugin({
            filename: 'index.html', // 文件名
            template: './src/index.html', // 用那个模板
            hash: true, // 为了防止缓存问题，添加一个MD5戳
            chunks: ['index'], //设置对应关系 即引用的文件
            minify: {
                // collapseWhitespace: true, // 去除空格
                // removeAttributeQuotes: true, //
            }
        }),
        new HtmlWebpackPlugin({
            filename: 'a.html', // 文件名
            template: './src/a.html', // 用那个模板
            hash: true, // 为了防止缓存问题，添加一个MD5戳
            chunks: ['a', 'index'], //设置对应关系 即引用的文件
            minify: {
                // collapseWhitespace: true, // 去除空格
                // removeAttributeQuotes: true, //
            }
        }),
        //  清楚废弃文件配置
        new CleanWebpackPlugin(['dist'])
       
    ],
    // 启动一个静态服务
    // 默认自动刷新，热更新
    devServer: {
        contentBase: path.join(__dirname, 'dist'),// 启动目录
        host: 'localhost', // 域名
        port: 5000, // 端口
        open: true, // 默认打开浏览器
        hot: true // 还需要配置一个插件，HotModuleReplacementPlugin使用
    }, // 开发服务配置
    mode: 'development' // 模式配置
}


// 需要在package.json中的script中添加命令，
{
    "scripts": {
        "build": "webpack",
        "dev": "webpack-dev-server"
    }
}

配置处理css

css 处理需要很多loader，我们挨个的来安装：style-loader, css-loader , less , less-loader, node-sass, sass-loader, stylur-loader

• 常规配置

let path = require('path')
let HtmlWebpackPlugin = require('html-webpack-plugin')
let CleanWebpackPlugin = require('clean-webpack-plugin')
let webpack = require('webpack')

module.exports = {
    entry: { // 入口文件
        index: './src/index.js',
        a: './src/a.js'
    }, 
    output: {
        filename: '[name].[hash:8].js',
        // 必须是绝对路径
        path: path.join(__dirname, 'dist')
    }, // 对象，输出
    module: { // 对象模块的处理，loader加载器
        // 配置css处理器
        rules: [
            {test: /\.css/, use: ['style-loader','css-loader']},
            {test: /\.less/, use: ['style-loader','css-loader', 'less-loader']},
        ]
    }, 
    plugins: [ // webpack对应的插件
        //热模块替换插件
        new webpack.HotModuleReplacementPlugin(),
        new HtmlWebpackPlugin({
            filename: 'index.html', // 文件名
            template: './src/index.html', // 用那个模板
            hash: true, // 为了防止缓存问题，添加一个MD5戳
            chunks: ['index'], //设置对应关系 即引用的文件
            minify: {
                // collapseWhitespace: true, // 去除空格
                // removeAttributeQuotes: true, //
            }
        }),
        new HtmlWebpackPlugin({
            filename: 'a.html', // 文件名
            template: './src/a.html', // 用那个模板
            hash: true, // 为了防止缓存问题，添加一个MD5戳
            chunks: ['a', 'index'], //设置对应关系 即引用的文件
            minify: {
                // collapseWhitespace: true, // 去除空格
                // removeAttributeQuotes: true, //
            }
        }),
        //  清楚废弃文件配置
        new CleanWebpackPlugin(['dist']),
    ],
    // 启动一个静态服务
    // 默认自动刷新，热更新
    devServer: {
        contentBase: path.join(__dirname, 'dist'),// 启动目录
        host: 'localhost', // 域名
        port: 5000, // 端口
        open: true, // 默认打开浏览器
        hot: true // 还需要配置一个插件，HotModuleReplacementPlugin使用
    }, // 开发服务配置
    mode: 'development' // 模式配置
}

• 抽离文件,link引用

let path = require('path')
let HtmlWebpackPlugin = require('html-webpack-plugin')
let CleanWebpackPlugin = require('clean-webpack-plugin')
let webpack = require('webpack')
// 抽离文件
let ExtractTextWebpackPlugin = require('extract-text-webpack-plugin')

module.exports = {
    entry: { // 入口文件
        index: './src/index.js',
        a: './src/a.js'
    }, 
    output: {
        filename: '[name].[hash:8].js',
        // 必须是绝对路径
        path: path.join(__dirname, 'dist')
    }, // 对象，输出
    module: { // 对象模块的处理，loader加载器
        // 配置css处理器
        // 抽离出样式文件，以link标签的形式引入
        // extract-text-webpack-plugin@next
        // min-css-extract-plugin
        rules: [
            // 抽离文件单独配置
            {test: /\.css/, use: ExtractTextWebpackPlugin.extract({
                 use: ['css-loader']
             })},
             {test: /\.less/, use: ExtractTextWebpackPlugin.extract({
                 use:  ['css-loader', 'less-loader']
             })}
        ]
    }, 
    plugins: [ // webpack对应的插件
        //热模块替换插件
        new webpack.HotModuleReplacementPlugin(),
        new HtmlWebpackPlugin({
            filename: 'index.html', // 文件名
            template: './src/index.html', // 用那个模板
            hash: true, // 为了防止缓存问题，添加一个MD5戳
            chunks: ['index'], //设置对应关系 即引用的文件
            minify: {
                // collapseWhitespace: true, // 去除空格
                // removeAttributeQuotes: true, //
            }
        }),
        new HtmlWebpackPlugin({
            filename: 'a.html', // 文件名
            template: './src/a.html', // 用那个模板
            hash: true, // 为了防止缓存问题，添加一个MD5戳
            chunks: ['a', 'index'], //设置对应关系 即引用的文件
            minify: {
                // collapseWhitespace: true, // 去除空格
                // removeAttributeQuotes: true, //
            }
        }),
        //  清楚废弃文件配置
        new CleanWebpackPlugin(['dist']),
        // 配置抽离文件
        new ExtractTextWebpackPlugin('css/index.css')
       
    ],
    // 启动一个静态服务
    // 默认自动刷新，热更新
    devServer: {
        contentBase: path.join(__dirname, 'dist'),// 启动目录
        host: 'localhost', // 域名
        port: 5000, // 端口
        open: true, // 默认打开浏览器
        hot: true // 还需要配置一个插件，HotModuleReplacementPlugin使用
    }, // 开发服务配置
    mode: 'development' // 模式配置
}

• 打包多个css

let path = require('path')
let HtmlWebpackPlugin = require('html-webpack-plugin')
let CleanWebpackPlugin = require('clean-webpack-plugin')
let webpack = require('webpack')

// 打包多个cass文件的配置
let cssExtractTextWebpackPlugin = new ExtractTextWebpackPlugin('./css/css.css')
let lessExtractTextWebpackPlugin = new ExtractTextWebpackPlugin('./css/less.css')
module.exports = {
    entry: { // 入口文件
        index: './src/index.js',
        a: './src/a.js'
    }, 
    output: {
        filename: '[name].[hash:8].js',
        // 必须是绝对路径
        path: path.join(__dirname, 'dist')
    }, // 对象，输出
    module: { // 对象模块的处理，loader加载器
        // 配置css处理器
        // 抽离出样式文件，以link标签的形式引入
        // extract-text-webpack-plugin@next
        // min-css-extract-plugin
        rules: [
            // {test: /\.css/, use: ['style-loader','css-loader']},
            // {test: /\.less/, use: ['style-loader','css-loader', 'less-loader']},
            // 抽离文件单独配置
            // {test: /\.css/, use: ExtractTextWebpackPlugin.extract({
            //     use: ['css-loader']
            // })},
            // {test: /\.less/, use: ExtractTextWebpackPlugin.extract({
            //     use:  ['css-loader', 'less-loader']
            // })},
            //打包多个文件配置
            {test: /\.css/, use: cssExtractTextWebpackPlugin.extract({
                use: ['css-loader']
            })},
            {test: /\.less/, use: lessExtractTextWebpackPlugin.extract({
                use:  ['css-loader', 'less-loader']
            })},
        ]
    }, 
    plugins: [ // webpack对应的插件
        //热模块替换插件
        new webpack.HotModuleReplacementPlugin(),
        new HtmlWebpackPlugin({
            filename: 'index.html', // 文件名
            template: './src/index.html', // 用那个模板
            hash: true, // 为了防止缓存问题，添加一个MD5戳
            chunks: ['index'], //设置对应关系 即引用的文件
            minify: {
                // collapseWhitespace: true, // 去除空格
                // removeAttributeQuotes: true, //
            }
        }),
        new HtmlWebpackPlugin({
            filename: 'a.html', // 文件名
            template: './src/a.html', // 用那个模板
            hash: true, // 为了防止缓存问题，添加一个MD5戳
            chunks: ['a', 'index'], //设置对应关系 即引用的文件
            minify: {
                // collapseWhitespace: true, // 去除空格
                // removeAttributeQuotes: true, //
            }
        }),
        //  清楚废弃文件配置
        new CleanWebpackPlugin(['dist']),
        // 配置抽离文件
        // new ExtractTextWebpackPlugin('css/index.css')
        // 打包多个文件配置
        cssExtractTextWebpackPlugin,
        lessExtractTextWebpackPlugin
       
    ],
    // 启动一个静态服务
    // 默认自动刷新，热更新
    devServer: {
        contentBase: path.join(__dirname, 'dist'),// 启动目录
        host: 'localhost', // 域名
        port: 5000, // 端口
        open: true, // 默认打开浏览器
        hot: true // 还需要配置一个插件，HotModuleReplacementPlugin使用
    }, // 开发服务配置
    mode: 'development' // 模式配置
}

配置css自动添加前缀

安装模块 postcss-loader autoprefixer, 主要依赖这两个模块

let path = require('path')
let HtmlWebpackPlugin = require('html-webpack-plugin')
let CleanWebpackPlugin = require('clean-webpack-plugin')
let webpack = require('webpack')
// 抽离文件
let ExtractTextWebpackPlugin = require('extract-text-webpack-plugin')

module.exports = {
    entry: { // 入口文件
        index: './src/index.js',
        a: './src/a.js'
    }, 
    output: {
        filename: '[name].[hash:8].js',
        // 必须是绝对路径
        path: path.join(__dirname, 'dist')
    }, // 对象，输出
    module: { // 对象模块的处理，loader加载器
        // 配置css处理器
        // 抽离出样式文件，以link标签的形式引入
        // extract-text-webpack-plugin@next
        // min-css-extract-plugin
        rules: [
            // {test: /\.css/, use: ['style-loader','css-loader']},
            // {test: /\.less/, use: ['style-loader','css-loader', 'less-loader']},
            // 抽离文件单独配置
            // postcss-loader 配合文件使用，需要在更目录创建文件postcss.config.js
            {test: /\.css/, use: ExtractTextWebpackPlugin.extract({
                use: ['css-loader', 'postcss-loader']
            })}
        ]
    }, 
    plugins: [ // webpack对应的插件
        //热模块替换插件
        new webpack.HotModuleReplacementPlugin(),
        new HtmlWebpackPlugin({
            filename: 'index.html', // 文件名
            template: './src/index.html', // 用那个模板
            hash: true, // 为了防止缓存问题，添加一个MD5戳
            chunks: ['index'], //设置对应关系 即引用的文件
            minify: {
                // collapseWhitespace: true, // 去除空格
                // removeAttributeQuotes: true, //
            }
        }),
        new HtmlWebpackPlugin({
            filename: 'a.html', // 文件名
            template: './src/a.html', // 用那个模板
            hash: true, // 为了防止缓存问题，添加一个MD5戳
            chunks: ['a', 'index'], //设置对应关系 即引用的文件
            minify: {
                // collapseWhitespace: true, // 去除空格
                // removeAttributeQuotes: true, //
            }
        }),
        //  清楚废弃文件配置
        new CleanWebpackPlugin(['dist']),
        // 配置抽离文件
        new ExtractTextWebpackPlugin('css/index.css')
       
    ],
    // 启动一个静态服务
    // 默认自动刷新，热更新
    devServer: {
        contentBase: path.join(__dirname, 'dist'),// 启动目录
        host: 'localhost', // 域名
        port: 5000, // 端口
        open: true, // 默认打开浏览器
        hot: true // 还需要配置一个插件，HotModuleReplacementPlugin使用
    }, // 开发服务配置
    mode: 'development' // 模式配置
}


// postcss.config.js 内容
module.exports = {
    plugins: [require('autoprefixer')]
}

优化之移除不需要的css

// 安装模块： purifycss-webpack purify-css
// 以上两个模块需要同时安装
// 安装glob模块，搜索文件使用
let path = require('path')
let HtmlWebpackPlugin = require('html-webpack-plugin')
let CleanWebpackPlugin = require('clean-webpack-plugin')
let webpack = require('webpack')
// 抽离文件
let ExtractTextWebpackPlugin = require('extract-text-webpack-plugin')
let PurifyWebpack = require('purifycss-webpack')
let glob = require('glob')

module.exports = {
    entry: { // 入口文件
        index: './src/index.js',
        a: './src/a.js'
    }, 
    output: {
        filename: '[name].[hash:8].js',
        // 必须是绝对路径
        path: path.join(__dirname, 'dist')
    }, // 对象，输出
    module: { // 对象模块的处理，loader加载器
        // 配置css处理器
        // 抽离出样式文件，以link标签的形式引入
        // extract-text-webpack-plugin@next
        // min-css-extract-plugin
        rules: [
            // {test: /\.css/, use: ['style-loader','css-loader']},
            // {test: /\.less/, use: ['style-loader','css-loader', 'less-loader']},
            // 抽离文件单独配置
            // postcss-loader 配合文件使用，需要在更目录创建文件postcss.config.js
            {
                test: /\.css/,
                use: ExtractTextWebpackPlugin.extract({
                    use: ['style-loader', 'css-loader', 'postcss-loader']
                })
            }
        ]
    }, 
    plugins: [ // webpack对应的插件
        // 去除冗余css
        new PurifyWebpack({
            // 查找src下的所有的HTML
            paths: glob.sync(path.join(__dirname, './src/*.html')),

        }),
        //热模块替换插件
        new webpack.HotModuleReplacementPlugin(),
        new HtmlWebpackPlugin({
            filename: 'index.html', // 文件名
            template: './src/index.html', // 用那个模板
            hash: true, // 为了防止缓存问题，添加一个MD5戳
            chunks: ['index'], //设置对应关系 即引用的文件
            minify: {
                // collapseWhitespace: true, // 去除空格
                // removeAttributeQuotes: true, //
            }
        }),
        new HtmlWebpackPlugin({
            filename: 'a.html', // 文件名
            template: './src/a.html', // 用那个模板
            hash: true, // 为了防止缓存问题，添加一个MD5戳
            chunks: ['a', 'index'], //设置对应关系 即引用的文件
            minify: {
                // collapseWhitespace: true, // 去除空格
                // removeAttributeQuotes: true, //
            }
        }),
        //  清楚废弃文件配置
        new CleanWebpackPlugin(['dist']),
        // 配置抽离文件
        new ExtractTextWebpackPlugin('css/index.css')
       
    ],
    // 启动一个静态服务
    // 默认自动刷新，热更新
    devServer: {
        contentBase: path.join(__dirname, 'dist'),// 启动目录
        host: 'localhost', // 域名
        port: 5000, // 端口
        open: true, // 默认打开浏览器
        hot: true // 还需要配置一个插件，HotModuleReplacementPlugin使用
    }, // 开发服务配置
    mode: 'development' // 模式配置
}

总结

以上就是简单的配置和使用，接下来将继续秀出一些飙车技巧，好不好，会不会出车祸，都要看自己了