webpack4开始使用

全文字数：   365

2分钟

webpack4在打包速度上有了明显的提高，比如文件代码的改变通过websock推送通知页面刷新。webpack4可以不要任何的配置文件，即可通过命令完成打包，下面进行简单的介绍。

初始化项目

npm init -y

安装依赖

npm install webapck

npm install webpack-cli

首先需要在当前目录建一个src文件夹，然后在src文件夹中建index.js文件，该文件就是我们的入口文件。开始的准备工作已经完成，下面就可以打包了。

开始打包

npx webpack

除了通过上面的命令，还可以在package.json文件中配置脚本来运行命令，具体方式如下

在package,json中配置

"scripts": {

   "build": "webpack --mode development"

 },

运行命令

npm run build

在webpack中使用默认的配置进行打包往往满足不了项目的需要，这个时候我们需要自定义自己的配置文件。

建立webpack.config.js文件，开始处理css文件，需要安装style-loader和css-loader模块

const path = require('path')

module.exports = {

    module: {

        rules: [

            {

            test: /\.css$/,

            loader: ['style-loader', 'css-loader']

            }

        ]

    }

}

往往我们处理css还不够，还需要处理html文件，需要安装html-webpack-plugin

const path = require('path')

module.exports = {

    module: {

        rules: [

            {

                test: /\.css$/,

                loader: ['style-loader', 'css-loader']

            }

        ]

    },

    plugins: [

        new HtmlWebpackPlugin({

            template: './src/index.html',

            filename: 'index.html',

            minify: {

                removeAttributeQuotes: true

            }

        })

    ]

}

《前端精髓》

019月

深入理解Date对象

288月

如何更好地利用JavaScript数组