webpack入门

最新推荐文章于 2025-05-13 08:51:35 发布

qq_33203555

最新推荐文章于 2025-05-13 08:51:35 发布

阅读量145

点赞数

分类专栏： webpack 文章标签： webpack

本文链接：https://blog.youkuaiyun.com/qq_33203555/article/details/88600817

版权

webpack 专栏收录该内容

1 篇文章

订阅专栏

webpack介绍

本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。

webpack安装

使用如下命令在项目中安装webpack

npm install webpack --save-dev

使用webpack打包项目

初始化一下文件
在这里插入图片描述
index.html为应用渲染的所需的html
index.js为入口文件

//index.html
    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>Document</title>
    </head>
    <body>
      <div class="hello">webpack学习</div>
      <input type="button" id='btn' value='按钮'>
      <div class="img-div"></div>
       <script src="./src/index.js"></script> 
      <script src="./src/app/print.js"></script> 
    </body>
    </html>

下面是index.js

//index.js
import './style/index.css'
import printMe from './app/print'

document.getElementById('btn').onclick = function(){
printMe()
  
}

重头戏来了，编写webpack配置文件

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin'); // 主要生成打包之后的html文件，可以将打包后的js引用自动注入到html中
const CleanWebpackPlugin = require('clean-webpack-plugin'); //清理打包的文件

module.exports = {
  mode: 'development',
  //entry:'./src/index.js',
  entry: {
    app: './src/index.js', //入口文件，指定打包从该文件开始
  },
  output: {
    filename: '[name].boundle.js', //打包后生成的文件名
    path: path.resolve(__dirname, '../dist'),//打包文件存放的路径，表示当前目录下上一级的dist文件
    publicPath: '/'
  },
  devtool: 'inline-source-map', //配置开发环境所需要，便于调试代码
  module: {
    rules: [{
      test: /\.css$/,
      use: [
        'style-loader', //处理css文件的loader  可以将css文件代码以style的形式插入到html的head中
        'css-loader'
      ]
    }, {
      test: /\.(png|svg|jpg|gif)/,
      use: [{
        loader: 'url-loader', //图片资源文件处理loader
        options: {
          limit: 10000, //文件大小（单位 byte）低于指定的该限制时，可以返回一个 DataURL。
          name: path.resolve(__dirname, '../dist/images/[name].[hash:7].[ext]')
        }
      }]
    }]
  },
  plugins: [
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      title: '管理输出',
      template: 'index.html', //以index.html为模板
      inject: true
    })
  ],
}

至此一个简单的webpack的简单安装使用以及打包配置就完成了。
我们可以在package.json的script对象中配置命令

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

然后使用npm run build 就可以打包了。