之前的一份webpack3的配置文件

let HtmlWebpackPlugin = require('html-webpack-plugin');// 引入插件
// webpack必须使用commonjs写法，默认导出一个对象
module.exports = {
    // 入口文件
    entry: './src/main.js',
    // 出口文件
    output: {
        filename: 'bundle.js',  // 打包后的文件名
        path: __dirname + '/dist'   // 打包路径(必须是绝对路径)
    },
    // 模块解析规则
    module:{
        rules: [
            // 解析js文件
            {
                test: /\.js$/,  // 正则匹配需要解析的文件
                use: 'babel-loader',
                exclude: /node_modules/ // 排除node_modules文件夹
            },
            // 解析css文件
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader']// use从右往左写
            },
            // 解析less
            {
                test: /\.less$/,
                use: ['style-loader', 'css-loader', 'less-loader']
            },
            // 解析图片
            {
                test: /\.(jpg|png|gif)$/,
                use: 'url-loader?limit=8192'// url-loader会自动调用file-loader，limit限制转成base64的图片大小
            }
        ]
    },
    // 插件
    plugins: [
        new HtmlWebpackPlugin({ // 在dist目录下生成html文件
            template: './src/index.html'    //模板文件
            // filename: 'xxx.html' //指定文件名(默认为index.html)
        })
    ]
}

webpack4

webpack4需要安装webpack和webpack-cli两个依赖，其他的跟webpack3基本大同小异。

npm install webpack webpack-cli --save-dev

基本配置

开发过程中一般需要一个开发服务器webpack-dev-server，自行npm install一下

webpack.config.js

const path = require('path');

module.exports = {
    mode: 'development',   //默认production 生产环境会将代码压缩
    //入口
    entry: './src/index.js',
    // 出口
    output: {
        filename: 'bundle.js',   //打包后文件名
        path: path.resolve(__dirname, 'dist')   //打包后文件所在路径，必须是绝对路径
    },
    // 开发服务器webpack-dev-server配置
    devServer: {
        port: 3000,     //端口
        open: true,     //自动打开浏览器
        progress: true,    //进度条
        //compress: true,
        contentBase: './dist',  //以哪个目录开启服务，默认是当前目录
    }
}

package.json加入脚本命令

"scripts": {
    "build": "webpack --config webpack.config.js",
    "dev": "webpack-dev-server"
}

打包生成html文件

需要使用html-webpack-plugin插件

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

webpack.config.js中先引入，再在配置中plugins项加入一些配置

const HtmlWebpackPlugin = require('html-webpack-plugin');   //打包生成html文件插件
...
...
plugins: [
    // 打包生成html文件，并且会自动将js文件引入
    new HtmlWebpackPlugin({
        template: './src/index.html',   //html模板文件
        filename: 'index.html',      //打包后文件名
        minify: {   //文件压缩
            collapseWhitespace: true    //折叠空格
        },
        hash: true      //引入文件名加上hash值防止文件缓存问题
    })
]

至此打包之后会生成html文件，并且js、css文件（loader配置好之后的）插入其中。

样式处理

基本配置

webpack默认只支持打包js文件，其他文件可能不太识别，这是就可以使用各种各样的 loader 来解析其他文件，比如css文件：

解析css文件至少需要 style-loader、css-loader两个loader

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

在webpack.config.js文件中加入

module: {
    rules: [
        {
            test: /\.css$/,    //css文件用css-loader解析,style-loader负责将css引入到html中
            use: ['style-loader', 'css-loader']    //注意顺序问题
        }
    ]
}

上面写法就完成了样式的基本配置，默认会<head>里的后面追加，也就是说自己直接在页面上写的样式可能会被覆盖

webpack4简单上手webpack4基本配置打包生成html文件样式处理处理图片watch实时打包babel

如果想在<head>里的前面引入的话，可以用loader的对象写法

{
    test: /\.css$/,    //css文件用css-loader解析,style-loader负责将css引入到html中
    use: [
        {
        loader: 'style-loader',
        options: {
            insertAt: 'top'     //在<head>里的前面移入css文件
        }
        },
        'css-loader'
    ]
}

webpack4简单上手webpack4基本配置打包生成html文件样式处理处理图片watch实时打包babel

配置less

打包less文件需要less-loader，而less-loader还要依赖less核心包，所以需要下载less、less-loader两个开发依赖。如果需要配置sass则换成node-sass、sass-loader，相同的意思，配置也差不多。

npm install less less-loader --save-dev

然后在webpack.config.js中加入一个loader规则即可

{
    test: /\.less$/,    //打包less文件
    use: ['style-loader', 'css-loader', 'less-loader']
}

样式打包成单独的css文件

以上配置打包出来的样式都是以link标签形式引入html文档中，如果我们需要将样式单独打包成一个css文件的话还需要用到一个 mini-css-extract-plugin 插件

npm install mini-css-extract-plugin --save-dev

webpack插件一贯的使用套路，先引入然后在plugins中加入该插件实例

const MiniCssExtractPlugin = require('mini-css-extract-plugin');//单独打包css文件插件

//插件配置
plugins: [
    // 单独打包css文件
    new MiniCssExtractPlugin({
        filename: 'main.css'    //打包出来的css文件名
    })
]

然后再修改之前配置的样式loader，将style-loader改成 MiniCssExtractPlugin.loader即可

{
    test: /\.css$/,    //css文件用css-loader解析,style-loader负责将css引入到html中
    use: [
        MiniCssExtractPlugin.loader,
        'css-loader'
    ]
},
{
    test: /\.less$/,    //打包less文件
    use: [MiniCssExtractPlugin.loader, 'css-loader', 'less-loader']
}

css样式加浏览器后缀

需要autoprefixer、postcss-loader两个依赖

npm inastall autoprefixer postcss-loader --save-dev

loader用法很简单，直接在之前的样式打包配置中的 'css-loader' 后面插入 'postcss-loader'

{
    test: /\.css$/,    //css文件用css-loader解析,style-loader负责将css引入到html中
    use: [
        MiniCssExtractPlugin.loader,
        'css-loader',
        'postcss-loader'
    ]
},
{
    test: /\.less$/,    //打包less文件
    use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader', 'less-loader']
}

注意：使用postcss-loader还需要创建一个postcss.config.js文件进行一些配置，如下：

module.exports = {
    plugins: [
        require('autoprefixer')    //使用autoprefixer插件
    ]
}

至此，一些需要添加浏览器前缀的样式就会自动添加

打包出来的css文件压缩

需要使用optimize-css-assets-webpack-plugin插件，配置一些优化项

npm install optimize-css-assets-webpack-plugin --save-dev

webpack插件一贯的使用套路，先引入再实例化，这次要加入一个 optimization 优化项

const OptimizeCss = require('optimize-css-assets-webpack-plugin');//压缩css文件插件
...
...
// 优化项
optimization: {
    // 压缩文件
    minimizer: [
        new OptimizeCss()
    ]
}

注意：压缩文件要在生产环境下才生效，所以要将mode改成production，不过webpack默认就是production

mode: 'production',   //默认production 生产环境会将js代码压缩

至此打包出来的css文件就是压缩后的，但你会发现js文件并没有压缩，这是因为使用了css压缩插件后还要使用js压缩插件uglifyjs-webpack-plugin才会进行js文件压缩。

npm install uglifyjs-webpack-plugin --save-dev

同样使用webpack插件套路，先引入再实例化，然后在刚才的优化项上加入

const Uglifyjs = require('uglifyjs-webpack-plugin');//压缩js文件插件
...
...
// 优化项
optimization: {
    // 压缩文件
    minimizer: [
        new OptimizeCss(),      //压缩css文件
        new UglifyJsPlugin({    //压缩js文件
            cache: true,    //是否使用缓存
            parallel: true,    //并发打包，一起压缩多个
            sourceMap: true    //源码映射，便于调试
        })
    ]
}

至此js、css文件就都可以打包压缩了。

处理图片

需要 file-loader、url-loader 两个loader

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

在webpack.config.js中加入一个loader规则

//处理图片
{
    test: /\.(jpg|png|gif)$/,
    use: {
        loader: 'url-loader',   // url-loader会自动调用file-loader
        options: {
            limit: 8192,         //图片小于8k的就转成base64
            outputPath: 'images/'//打包到images目录下
        }
    }
}

watch实时打包

虽然平时一般都会用webpack-dev-server进行开发测试，但如果你想实时看到打包后的文件的话，npm run build 打包之后文件生成命令行就会停止，我们更改代码后又要重新 npm run build 打包，如果我们想一直监控代码变化自动进行实时打包可以加一个 watch 配置

//与plugins、module同级
watch: true,
watchOptions: {
    poll: 1000,     //每秒1000次
    aggregateTimeout: 500,      //防抖
    ignored: /node_modules/     //忽略
}

这里主要说说热更新

先在devServer选项中加入 hot: true

引入webpack const webpack = require('webpack');

在plugins选项中添加插件 new webpack.HotModuleReplacementPlugin()

最后再入口js文件中加入

//热更新
if(module.hot){
    module.hot.accept();
}

配置热更新的文章

webpack.config.js文件

const HtmlWebpackPlugin = require('html-webpack-plugin');                       //生成html文件插件
const CleanWebpackPlugin = require('clean-webpack-plugin');
const webpack = require('webpack');
const ExtractTextWebpackPlugin = require('extract-text-webpack-plugin');        //独立打包成css文件插件

module.exports = {
    mode: 'development',    //默认production 生产环境会将代码压缩
    //入口文件
    entry: './src/main.js',
    //出口文件
    output: {
        filename: 'bundle.js',      //打包后文件
        path: __dirname + '/dist'   //打包路径，绝对路径
    },
    //开发服务webpack-dev-server
    devServer: {        
        compress: true,         //服务器压缩
        host: 'localhost',
        port: 3000,
        open: true,
        hot: true               //热更新
    },
    //插件
    plugins: [
        //热更新
        new webpack.HotModuleReplacementPlugin(),
        //打包前先清空目录，非必须
        // new CleanWebpackPlugin(['./dist']),
        //打包目录下生成html文件
        new HtmlWebpackPlugin({
            template: './src/index.html',        //模板文件
            minify: {
                collapseWhitespace: true        //折叠空格
            }
        }),
        //独立打包成css文件
        new ExtractTextWebpackPlugin({
            filename: 'css/index.css',
            disable: true           //开发环境下禁用，为了样式热更新
        })
    ],
    //加载器
    module: {
        rules: [
            {
                test: /\.css$/,
                use: ExtractTextWebpackPlugin.extract({
                    fallback: 'style-loader',       //开发环境下，为了样式热更新
                    use: ['css-loader']
                })
            },
            {
                test: /\.less$/,
                use: ExtractTextWebpackPlugin.extract({
                    fallback: 'style-loader',       //开发环境下，为了样式热更新
                    use: ['css-loader', 'less-loader']
                })
            }
        ]
    },
}

babel

如果项目中用到es6语法，那么还需要配置一下babel，在项目根目录新建 .babelrc 文件

webpack4简单上手webpack4基本配置打包生成html文件样式处理处理图片watch实时打包babel

上面提到的babel依赖包第一套可以理解为语法转换器，第二套可以理解为语法转换的标准规范，二者缺一不可。

注意：babel7.0之后，包名升级为 @babel/core、@babel/preset-env、@babel/plugin-transform-runtime 等如此。

npm install babel-loader @babel/core @babel/preset-env @babel/plugin-transform-runtime --save-dev

webpack.config.js中加入一个loader规则

{
   test: /\.js$/,      //js文件babel处理
   use: ['babel-loader'],
   include: path.resolve(__dirname, 'src'),//src目录下的js文件需要被loader 处理
   exclude: /node_modules/
}

.babelrc

{
    "presets": [
        "@babel/preset-env"
    ],
    "plugins": [
        "@babel/plugin-transform-runtime"
    ]
}

webpack4简单上手webpack4基本配置打包生成html文件样式处理处理图片watch实时打包babel

webpack4

基本配置

打包生成html文件

样式处理

基本配置

配置less

样式打包成单独的css文件

css样式加浏览器后缀

打包出来的css文件压缩

处理图片

watch实时打包

babel

继续阅读

使用extract-text-webpack-plugin插件后报错

CSS样式抽离之 extract-text-webpack-plugin 插件

webpack, js 兼容性处理

Vue项目 - 项目文件介绍

vue3.0搭建，从零开始搭建vue3.0脚手架插件分布情况（最新版）

20分钟gulp快速入门

NODE_ENV不是内部或外部命令,也不是可运行的程序

你配置Webpack 4的方式可能是错的！

本月推荐：15 个有用的 JavaScript 和 CSS 库

使用Travis-CI 与 Github Webhook自动部署你的页面

项目中遇到的问题1-10

demo06 webpack + babel7 + typescript

测试工程师面试解析～

Vue - 安装Node.js（配置环境变量、配置NPM下载存放目录、NPM设置镜像仓库）

Vue项目 - 单文件组件和Vue中的路由

vue-cli简介（中文翻译）