webpack5从零搭建一个项目

最新推荐文章于 2024-09-12 16:09:28 发布

原创

最新推荐文章于 2024-09-12 16:09:28 发布 · 3.3k 阅读

15 ·

CC 4.0 BY-SA版权

文章标签：

#webpack #javascript #前端

本文详细介绍了如何初始化webpack项目，包括配置、CSS处理、环境区分、持续优化策略，以及如何在Vue环境中开发。涵盖了热更新、打包分析、chunk分离、压缩和优化技术，以及Vue组件的引入和部署。

一、初始化项目

1. 新建webpackdemo目录，初始化npm

npm init

2. 安装webpack包

npm i -D webpack webpack-cli webpack-dev-server

3. 创建配置webpack.config.js和入口main.js

首先新建src目录，并在下面新建一个main.js

之后新建build文件夹并新建webpack.config.js添加如下配置：

const path = require('path');
module.exports = {
   
   
    mode: 'development', // 开发模式
    entry: path.resolve(__dirname, '../src/main.js'), // 入口文件
    output: {
   
   
        filename: '[name].[hash:8].js', // [name] 指entry属性名字, 默认为main
        path: path.resolve(__dirname, '../dist'), // 打包后的目录
        clean: true, // 打包前清空输出目录，相当于clean-webpack-plugin插件的作用,webpack5新增。
    }
}

4. 安装插件html-webpack-plugin

文件打包好之后,我们不可能每次在html文件中手动引入打包好的js，这时候就需要使用html-webpack-plugin创建html页面，并将打包后的js文件需要引入到html中

npm i -D html-webpack-plugin

我们来测试一下，新建public文件夹，新建index.html文件，更改webpack.config.js配置：

const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
   
   
    plugins: [
        new HtmlWebpackPlugin({
   
   
            // 选取一个html作为模版，在dist目录下会生成一个相同的html，之后将打包好的js注入到该html文件
            template: path.resolve(__dirname, '../public/index.html')
        })
    ]
}

同时在package.json中添加一行打包命令：

"build": "webpack --config build/webpack.config.js"

运行npm run build，可以看到生成了dist文件夹并在index.html引入了js
在这里插入图片描述

5.引用css

在引入css时也需要一些loader来解析我们的css：

npm i -D style-loader css-loader less less-loader

配置文件如下：

// webpack.config.js

module.exports = {
   
   
    //...省略其他配置
    module: {
   
   
        rules: [
            {
   
   
                // 用正则去匹配要用该 loader 转换的 CSS 文件
                test: /\.css$/,
                exclude: path.resolve(__dirname, 'node_modules'),
                use: ['style-loader', 'css-loader'] // 切记从右向左解析原则
            },
            {
   
   
                test: /.less$/,
                exclude: path.resolve(__dirname, 'node_modules'),
                use: ['style-loader', 'css-loader', 'less-loader'] // 从右向左解析原则   
            }
        ]
    }
}

6.为css添加浏览器前缀

安装插件：

npm i -D postcss-loader autoprefixer

引入autoprefixer有两种方式：

(1) 在项目根目录下创建一个postcss.config.js文件，配置如下：

module.exports = {
   
   
    plugins: [require('autoprefixer')]  // 引用该插件即可了
}

(2) 直接在webpack.config.js里配置:

// webpack.config.js
module.exports = {
   
   
    //...省略其他配置
    module: {
   
   
        rules: [{
   
   
            test: /\.less$/,
            use: ['style-loader', 'css-loader', {
   
   
                loader: 'postcss-loader',
                options: {
   
   
                    plugins: [require('autoprefixer')]
                }
            }, 'less-loader'] // 从右向左解析原则
        }]
    }
}

这里我们使用第一种方式，之后在webpack.config.js里配置postcss-loader：

// webpack.config.js

module.exports = {
   
   
//...省略其他配置
    module: {
   
   
        rules: [
            {
   
   
                // 用正则去匹配要用该 loader 转换的 CSS 文件
                test: /\.css$/,
                exclude: path.resolve(__dirname, 'node_modules'),
                use: ['style-loader', 'css-loader', 'postcss-loader'] // 切记从右向左解析原则
            },
            {
   
   
                test: /.less$/,
                exclude: path.resolve(__dirname, 'node_modules'),
                use:

最低0.47元/天解锁文章