基本的webpack配置

最新推荐文章于 2026-01-06 12:20:24 发布

原创最新推荐文章于 2026-01-06 12:20:24 发布 · 188 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#webpack #前端打包

webpack 专栏收录该内容

8 篇文章

订阅专栏

本文详细介绍了Webpack的全局与本地安装方式，配置文件的创建与编辑，包括如何设置入口、出口、插件、模块、开发服务器等关键组件。同时，提供了常见插件的使用案例，如html-webpack-plugin、clean-webpack-plugin及HotModuleReplacementPlugin。

全局安装

npm install webpack -g

本地安装

npm install webpack webpack-cli webpack-dev-server  -D

创建webpack.config.js文件

在package.json的scripts中添加以下代码

如果webpack.config.js在根目录可以省略，为默认，如果在自己自定义的文件夹下，需要配置路径
"scripts": {
    "build": "webpack webpack/webpack.config.js",   
    "dev": "webpack-dev-server webpack/webpack.config.js"
 }

在终端输入npm run build 就可以执行 webpack打包
输入npm run dev就可以打开node支持下webpack服务器

入口：entry

当只有一个JS文件被作为入口时

entry: './src/index.js'

webpack会从这个文件切入，将所有和这个文件有关的都一起打包
比如该文件内有以下语句，那么webpack就会接着找test.js中相关部分：

let str = require('./test.js');

当多个文件作为入口时
如果输出是一个文件，即合并，可以用数组的方式

entry: ['./src/index.js','./src/test.js'],

如果输出是多个文件，且会被引用到不同的文件上，可以用对象的方式，以便输出时区分

 entry: {
        index: './src/index.js',
        test: './src/test.js'
 },

出口output

path作为输出路径，[hash:8]只是为了名称不重复，解决缓存问题
输出一个文件

 output: {
        path: path.resolve('./build'),
        //这个路径必须是绝对路径
        filename: 'bundle.[hash:8].js'
 }

输出多个文件,需要和入口多个文件对应，且[name]就是入口对象里的键名

output: {
       path: path.resolve('./build'),
       //这个路径必须是绝对路径
       filename: '[name].[hash:8].js'
   }

插件plugins

插件目的在于解决 loader 无法实现的其他事 —webpack中文网
比如：打包html文件

const HtmlWebpackPlugin = require('html-webpack-plugin'); //通过 npm 安装
plugins:[
	new HtmlWebpackPlugin({
           filename:'index.html',
           template: './src/index.html',
           title:'主页',
           hash:true, //哈希，用来清缓存
           chunks:['index'],   //引入对应的输出文件
           //压缩
           minify:{
               removeAttributeQuotes:true,//删除属性值的的""
                collapseWhitespace:true //删除空格
           }
       }),
]

其他比较常用的插件：
清除文件该插件作为清除生成的dist文件，防止带有hash值的文件无法被替代，从而造成过多的文件，该插件的新版不需要传入参数

const CleanWebpackPlugin = require('clean-webpack-plugin');
plugins: [
       new CleanWebpackPlugin();
]

热加载该插件提升了开发时的效率

const webpack = require('webpack'); // 先引入webpack
 plugins: [
       new webpack.HotModuleReplacementPlugin();
 ]
 devServer: {
        contentBase: './dist',
        port: 3000,//端口号
        hot: true    // 添加hot属性，并将值改为true
  }

开发服务器devServer

 devServer:{
     contentBase:'./build',
     port:3000,//端口号
     compress:true,//服务器压缩
     open:true,  //自动打开浏览器
     hot:true
 }

模块module

module:{
    rules: [
     {
        test: /\.js$/,
        loader: 'babel-loader',             //将ES6转化为ES5
       	exclude: /node_modules/
      },
      {
        test: /\.tsx?$/,
          use: 'ts-loader',
          exclude: /node_modules/
      },
     {
         test:/\.css$/,use:[
             {loader :'style-loader'},
             {loader :'css-loader'}
         ]
     },
     {
         test:/\.less$/,use:[
             {loader :'style-loader'},
             {loader :'css-loader'},
             {loader :'less-loader'}
         ]  
     }
 ]

配置resolve

resolve: {
	// alias通过别名的方式，来映射原来的路径
	alias：{
		'@': resolve('src')   // @就代表了src文件夹，可以直接@/ 来查找路径
	}，
	// extensions是在导入含该后缀名的文件时，是否可以省略后缀名
    extensions: ['.tsx', '.ts', '.js']   
  }