webpack篇

webpack是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)

现代 javascript 应用程序的 **静态模块打包器 (module bundler)**
静态: 文件资源
模块: node环境, 引入文件, 遵守模块化语法
除了合并代码, 还可以**翻译**和**压缩**代码
less/sass     -> css-   ES6/7/8       -> ES5
html/css/js -> 压缩合并

安装并使用webpack

 命令如下：`npm i webpack webpack-cli -D // --save-dev`
 它说明打包操作已经成功：index.js和tool.js已经合成了一个main.js文件了。

配置文件的作用

创建并使用默认配置文件

在项目根目录下创建一个名为**webpack.config.js**。其内容如下：

module.exports = {
  mode: 'development', // 打包方式
}

修改打包模式

webpack给mode 提供了两个模式:
●  development :开发模式(代码不会压缩 混淆)\
●  production:生产模式（压缩，混淆，加密....... 不可读）

module.exports = {
  mode:"development"
}

在打包时指定配置文件

下面，自已创建一个webpack.dev.js的文件，用它来做配置文件
在项目根目录下创建webpack.dev.js，内容如下：

module.exports = {
  output:{
    filename:'boundle.js'
  }
}

使用这个配置文件中的设置来打包

npx webpack --config webpack的配置文件

简化打包命令

 这样 ，我们就得到了两个可以执行的命令: dev, build 。
 可以在根目录下的小黑窗中通过:
 npm run build, npm run dev 来运行

"scripts": {
  "dev": "webpack --config webpack.dev.js",
  "build": "webpack",
  "test": "echo "Error: no test specified" && exit 1"
}