配置文件名称

  • webpack默认配置文件：webpackk.config.js
  • 可以通过webpack —config指定配置文件

    webpack配置组成

    1. module.export = {
    2. entry:'./src/index.js', // 文件打包的入口文件
    3. output: 'dist/main.js', // 打包的输出
    4. mode: 'production', // 环境
    5. module: {
    6.   rule: [ // loader 配置
    7.     { test:/\.txt$/, use:'raw-loader' }
    8.   ]
    9. },
    10. plugins: [
    11.   new HtmlWebpackPlugin({
    12.     template: './src/index.html'
    13.   })
    14. ]
    15. }

    零配置的webpack包含的内容

    1. module.export = {
    2.   entry:'./src/index.js', // 文件打包的入口文件
    3.   output: 'dist/main.js', // 打包的输出
    4. }

    webpack安装及配置

  1. 创建目录和packgage.json

    1. mkdir my-project
    2. cd  my-project
    3. npm init -y

  2. 安装webpack和webpack-cli

    1. npm install --save-dev webpack webpack-cli

  3. 创建webpack.config.js

    1. module.export = {
    2.  mode: 'production', // 环境
    3.  entry:'./src/index.js', // 文件打包的入口文件
    4.  output: {
    5.      path: path.resolve(__dirname,'dist'),
    6.      filename: 'bundle.js'
    7.  }
    8. }

  4. 创建html文件引入打包后的文件 ```html <!DOCTYPE html> 

  2. 5. 通过npm script 运行webpack
  3. ```json
  4. {
  5.   "name": "my-project",
  6.   "version": "1.0.0",
  7.   "description": "",
  8.   "main": "index.js",
  9.   "scripts": {
  10.     "build": "webpack"
  11.   },
  12.   "keywords": [],
  13.   "author": "",
  14.   "license": "ISC",
  15.   "devDependencies": {
  16.     "webpack": "^5.65.0",
  17.     "webpack-cli": "^4.9.1"
  18.   },
  19. }
  • 通过npm run build 运行构建
  • 原理：模块局部安装会在node_modules/.bin 目录创建软连接