在前端工程化中webpack的配置

2021-01-08 01:08 大前端阅读 3264 来源

首先我们要先看项目中有没有webpack.config.js这个文件，如果没有的话，我们需要在项目中新创建webpack.config.js这个文件，然后在里面进行配置

一、配置Mode

首先我们在新创建的webpack.config.js中先创建结构，进行配置

const config = {
}

module.exports = config

在config中加入 mode: 'production';

mode有两种模式，development开发模式和production成品模式，使用时按照自己的需求配置。

代码如下

 mode: 'production',

二、配置入口文件

entry配置入口文件，此配置将决定webpack打包时那个为入口文件,例如我的入口文件为src文件夹下index.js则，entry: './src/index.js'。

代码完成后如下

entry: './src/index.js',

三、输出文件配置

output配置，此处配置webpack文件打包后的输出路径以及文件名，需要设置底下path和filename两个属性

因为要获取路径，我们需要在项目中引用path模块，获取当前路径

const path = require('path')

配置代码如下

output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'build.js'
},

四、资源加载配置

在工程中，我们需要用到css、scss等文件，在这里我们只展示sass，scss，css，图片和字体的配置，

在使用前，需要先进行安装一些依赖

npm install style-loader css-loader sass-loader node-sass file-loader --save-dev

配置如下

module: {
   rules: [
       { test: /\.(css|sass|scss)$/, use: ['style-loader','css-loader','sass-loader'] },     // 设置css、sass、scss资源加载
       { test: /\.(png|svg|jpg|gif)$/, use: ['file-loader'] },                               // 设置png等图片资源的加载
       { test: /\.(woff|woff2|eot|ttf|otf)$/, use: ['file-loader'] }                         // 设置字体资源的加载
   ]
},

五，配置插件

在这里我们使用 html-webpack-plugin 进行一个简单创建 HTML 文件，用于服务器访问的演示

首先我们先安装依赖

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

然后我们在plugins中应用该插件

new HtmlWebpackPlugin({
       template: 'index.html',  // 模块文件路径
       filename: "index.html"   // 生成文件名称
}),

六、热模块的开发

在项目中我们每次手动打包太过麻烦，所以我们需要配置一下热模块，每次更改文件后让它自动完成打包

我们要先安装依赖

npm install webpack-dev-server --save-dev

引用依赖

const webpack = require('webpack');

在配置中打开热更新，代码如下

devServer: {
    hot: true,
}

在plugins中引入该插件

new webpack.HotModuleReplacementPlugin()

这时我们用 webpack serve命令就能使用热更新

七、打包后自动删除多余文件

该功能需要借助 clean-webpack-plugin 插件来完成，它能够打包完成后自动删除没用的文件

先安装依赖

npm install clean-webpack-plugin --save-dev

引用依赖

var { CleanWebpackPlugin } = require('clean-webpack-plugin')

在plugins中引用

new CleanWebpackPlugin()

使用copy-webpack-plugin插件可以将一个文件或者目录整个复制到构建目录中

先安装依赖

npm install copy-webpack-plugin --save-dev

引用依赖

const CopyPlugin  = require('copy-webpack-plugin')

在插件plugins中使用该功能

new CopyPlugin({
     patterns: [
         { from: './assets', to: './assets' },     // from代表构建前的文件路径 to 代表构建后的文件名称及目录
     ],
}),

到这里webpack差不多就配置完成了，值得一提的是，webpack4以后就支持es6语法了，所以不需要在单独配置es6的语法了
全部代码如下

const path = require('path')
var HtmlWebpackPlugin = require('html-webpack-plugin')
var { CleanWebpackPlugin } = require('clean-webpack-plugin')
const CopyPlugin  = require('copy-webpack-plugin')
var webpack = require('webpack');

const config = {
    mode: 'production',
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'build.js'
    },
    module: {
        rules: [
            { test: /\.(css|sass|scss)$/, use: ['style-loader','css-loader','sass-loader'] },
            { test: /\.(png|svg|jpg|gif)$/, use: ['file-loader'] },
            { test: /\.(woff|woff2|eot|ttf|otf)$/, use: ['file-loader'] }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: 'index.html',
            filename: "index.html"
        }),
        new webpack.HotModuleReplacementPlugin(),
        new CleanWebpackPlugin(),
        new CopyPlugin({
            patterns: [
                { from: './assets', to: './assets' },
            ],
        }),
    ],
    devServer: {
        hot: true,
    }
}

module.exports = config