webpack基本使用

webpack4.x最详细入门讲解

一、Webpack介绍

1. 什么是webpack

Webpack 是当下最热门的前端资源模块化管理和打包工具。它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。

2. 为什么使用webpack

如果像以前开发时一个html文件可能会引用十几个js文件,而且顺序还不能乱，因为它们存在依赖关系，同时对于ES6+等新的语法，less, sass等CSS预处理都不能很好的解决……，此时就需要一个处理这些问题的工具。

二、Webpack的安装

1. 全局安装
   $ npm install –g webpack(不推荐)
   $ cnpm install -g webpack-cli(webpack有一部分功能在webpack-cli中，最好还是安装一下)
2. 本地安装
   $ npm install –-save-dev webpack
   $ cnpm install webpack-cli --save-dev

三、Webpack的使用

1. $ npm init 或 $ npm init -y初始化项目
   这样会在当前项目下产生一个package.json的文件

2. 创建并编写webpack.config.js文件

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

   注：__dirname是node.js中的一个全局变量，它指向当前执行脚本所在的目录

   但平时我们看到的脚手架配置也比较喜欢采用node.js的path模块来处理绝对路径，所以我们也可以采用如下的写法，和上述的效果是一样的：

   const path = require('path');
   module.exports = {
       entry: path.join(__dirname, "/src/index.js"), // 入口文件
       output: {
           path: path.join( __dirname, "/dist"), //打包后的文件存放的地方
           filename: "bundle.js" //打包后输出文件的文件名
       }
   }
   

   注：path.join的功能是拼接路径片段。

   有了这个配置文件，我们只需在终端中运行webpack命令就可进行打包，这条命令会自动引用webpack.config.js文件中的配置选项

3. 执行打包操作
(1) 直接执行命令 webpack ./src/index.js -o ./dist/，或者命令webpack ./src/index.js -o ./dist-dev --mode=development(指定模式)

(2) 设置package.json中的script，然后在npm run xxx

"scripts": {
    "base": "webpack ./src/index.js -output dist-dev --mode=development",
    "build": "webpack"
}

npm run build根据指令打包，npm run build根据webpack.config.js中的配置打包