webpack（二）webpack介绍与基础配置

什么是webpack

webpack最初的目标是实现前端项目模块化，旨在更高效的管理和维护项目中的每一个资源。
可以看做是模块打包机，分析你的项目结构，找到javascript模块以及其它一些浏览器不能直接运行的拓展语言（Scss、TypeScript等），并将其打包为合适的格式以供浏览器使用。

可以做什么

• 代码转化：es6转为es5，scss、less转为css
• 文件优化：压缩代码体积
• 代码分割：路由懒加载
• 模块合并
• 自动刷新：热更新
• 代码校验
• 自动发布

2.基础配置文件

• 入口文件
  默认是src/index.js,如果我们想要修改入口文件，可以在打包时使用命名npx webpack --entry ./src/main.js来进行打包
• 出口文件
  默认是项目下的dist目录，如果想要修改npx webpack --output-path ./build

可以使用webpack配置文件进行配置（入口文件可以采用相对路径，出口文件只能采用绝对路径）

// webpack.config.js 
const path = require('path')

module.exports = {
    entry: './src/index.js',
    output: {
        filename: "build.js",
        // path: './dist'  //The provided value "./dist" is not an absolute path! 必须是绝对路径
        path: path.resolve(__dirname, 'dist') //path.resolve(__dirname)__dirname， 在所有情况下，该变量都表示当前运行的js文件所在的目录，它是一个绝对路径，在此路径下新建一个dist目录，存放打包文件
    }
}
1
2
3
4
5
6
7
8
9
10
11

• 指定webpack配置文件

// package.json
"build":"webpack --config test.webpack.json"
1
2