使用webpack搭建打包一个项目

最新推荐文章于 2025-06-30 17:31:52 发布

原创

最新推荐文章于 2025-06-30 17:31:52 发布 · 1.3k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#node.js #javascript #html #Webpack2 #vue

本文详细记录了使用webpack从创建项目目录到配置打包过程，包括npm初始化、安装webpack及插件、配置webpack.config.js、处理不同类型的文件（如js、html、css、scss和静态资源），以及使用热加载、清理旧包、处理html引用图片等问题。通过这些步骤，实现了愉快地编写和管理代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

记录一下自己使用webpack管理代码

webpack搭建项目的过程比较复杂，甚至插件版本问题还会引发一些未知的问题，但是搭建完成，对于书写代码真的是很棒！
进入正题：
1.首先创建一个项目目录文件夹，我给他命名为my-webpack，npm init初始化一个package.json，然后npm i将依赖下下来，这里我新建了一个src目录，在里面书写业务代码；
初始化的项目目录
2.webpack工具要下下来webpack -D 、webpack-cli -D，这里以及后面所有下载的插件loader之类的都是-d，意思是运用到开发环境，然后在项目根目录下新建一个webpack.config.js，这里面是配置打包相关的一些配置：

module.exports = {
   
   
  entry: __dirname + "/src/js/main.js", 
  output: {
   
   
    path: __dirname + "/dist", //打包后的文件存放的地方
    filename: "js/chunk.[hash:8].js", //打包后输出文件的文件名
  }
}

这里我是把入口文件main.js放在src/js文件夹下，main.js:
main.js
这里可以使用一个热加载插件：‘webpack-dev-server’，每次保存就会刷新

//配置webpack开发服务功能
  devServer: {
   
   
    contentBase: "./src", //本地服务器所加载的页面所在的目录
    host: "localhost",
    inline: true, //实时刷新
    compress: true,
    port: 8080,
  }

为了跟vue脚手架类似，我把package.json里面修改成了这样：

"scripts": {
   
   
    "dev": "webpack-dev-server",
    "build": "webpack  --mode production --progress --display-modules --colors --display-reasons",
    "test": "echo \"Error: no test specified\" && exit 1"
  },

运行一下代码：
在这里插入图片描述
3.一些插件使用：打包时无法先删除原来的包，所以需要一个‘clean-webpack-plugin’插件，webpack本身无法打包html和css，也可以借助插件解决，分别是：‘html-webpack-plugin’、‘extract-text-webpack-plugin’

 plugins: [
    new HtmlWebpackPlugin({
   
   
      template: "./src/index.html",
      filename: "index.html",
      minify: {
   
   
        // 压缩操作
        removeComments: true, // 移除HTML中的注释
        collapseWhitespace: true, // 删除空白符与换行符
        minifyCSS: true, // 压缩内联css
        removeAttributeQuotes: true, // 删除模板中的双引号
        collapseWhitespace: true, // 将模板压缩成一行
      },
      hash: true,
    }),
    new CleanWebpackPlugin(),
    new ExtractTextPlugin({
   
   
      filename: "css/[name].[hash:8].css",
      // publicPath: "../",
      allChunks: true,
    })
  ]

4.由于还要使用scss和一些静态资源，所以就可以配置一些loader来处理他们url-loader处理图片，样式表用style-loader、css-loader、sass-loader

 {
   
   
        test: /\.(jpg|png|gif|bmp|jpeg)$/,
        use: {
   
   
          loader: "url-loader",
          options: {
   
   
            esModule: false,
            name: "img/[hash:8].[name].[ext]",
            limit: 1000 * 10,  //单位字节 超过10k不处理
            publicPath: "../"