基本配置

❝

webpack 默认的零配置的功能很弱,有的时候需要手动配置,默认的配置文件是 webpack.config.js

❞

配置文件

• 在项目根目录新建webpack.config.js

• 采用node.js写法

• 导出一个对象

  「入口文件」

  • entry：默认值是./src/index.js，可以自己指定文件

    • 也可以对象语法
    • 使用场景多页面和抽离公共文件的时候

    module.exports = {
      entry: {
        index: './src/index.js',
        about: './src/about.js'
      }
    };

「出口文件」

output：默认值是./dist/main.js

• filename：生成文件的名字

• [hash]是避免缓存的随机hash值

• [name]是对应「entry」，打包后会生成indexxxxx.js，aboutxxxxx.js

      module.exports = {
        entry: {
          index: './src/index.js',
          about: './src/about.js'
        },
        output: {
        	filename: '[name][hash].js',
        	path: path.resolve(__dirname, 'dist')
        }
      };

• 「path」：这里需要引入一个 node 的核心模块，需要打包后存放的地址是一个绝对路径，需要path.resolve()进行解析

• 「模式」：mode，告诉 webpack 以哪种环境运行打包，默认是production

  • 「development」 ：开发环境

  • 「production」：生产环境

const path = require('path')
module.exports = {
	mode:'development',
    entry: './src/index.js',
    output: {
        filename: 'build.js',
        path: path.resolve(__dirname, 'dist')
    }
}

❝

运行 npx webpack 进行打包，会生成一个 dist 文件夹，里面有一个 build.js

❞

欢迎关注公众号