webpack 使用

背景：

简而言之，如果你曾经遇到过以下任何一种情况：
载入有问题的依赖项
遇到作用域的问题 —— CSS 和 JavaScript 都会有
寻找一个让你在 JavaScript 中使用 Node/Bower 模块的构建系统，要么就得依靠一个令人发狂的后端配置才能正确地使用这些模块
等等……

0. webpack 打包原理：

整个打包后的bundle.js是一个匿名函数自执行。参数则为一个数组。数组的每一项都为个function。function的内容则为每个模块的内容，并按照require的顺序排列。

相关链接

1. 基础环境

node + webpack + webpack-cli

2. 应用

2.1 js 文件打包（模块化 + 压缩）

初始化 - 配置文件 - webpack 运行

npm init - webpack.config.js - webpack

webpack.config.js 代码

var path = require('path');

module.exports = {
  entry: './js.js',  // js.js 为  webpack.config.js  同级目录待打包的 js 文件
  output: {
    filename: 'bundle.js',  // 输出文件 及文件夹    dist/bundle.js
    path: path.resolve(__dirname, 'dist')
  }
};

View Code

2.2 配合 babel 实现 es6 转为 es5 兼容低级浏览器

2.2.1 安装三个依赖项

"babel-core": "^6.26.3", npm install --save-dev babel-core babel-preset-es2015

"babel-loader": "^7.1.5", npm install --save-dev babel-loader@7

"babel-preset-es2015": "^6.24.1"

2.2.2 代码

webpack.config.js

module.exports = {   
  entry: './es6/main.js',   
  output: {   
      path: __dirname,   
      filename: './bin/app.bundle.js',   
  },   
  module: {   
      rules: [{   
          test: /.js$/,   
          exclude: /node_modules/,   
          loader: 'babel-loader',
          query:{
            presets: ['es2015']
          }   
      }]   
  }   
}

View Code

.babelrc 文件代码（新建记事本.txt - 另存为任意文件 + .babelrc ）

{ "presets": [ "es2015" ] }

2.2.3 示例代码

main.js ：

let a = 111;

let b = 222;

var xxx = (c,d) => c*d;

3. npm 安装时 --save --dev 和 --save 区别

--save：将保存配置信息到pacjage.json。默认为dependencies节点中，dependencies：运行时的依赖，发布后，即生产环境下还需要用的模块。
--dev：将保存配置信息devDependencies节点中。devDependencies：开发时的依赖。里面的模块是开发时用的，发布时用不到它。

4. 手动搭建开发环境

-- install
npm init

-dev plug      --save-dev
npm install --save-dev webpack
npm install --save-dev webpack-cli
npm install --save-dev style-loader css-loader
npm install --save-dev file-loader
npm install --save-dev html-webpack-plugin
npm install --save-dev clean-webpack-plugin 
npm install --save-dev webpack-dev-server 
npm install --save-dev express webpack-dev-middleware

-product need     --save
npm install --save lodash

-- config
"build": "webpack"

-- tips
npx - npm 升级版 ，自动寻找路径
根目录新建 webpack.config.js 处理配置

--do
npx webpack   /  npm run build
npx webpack --config webpack.config.js  (自动识别，可配置任意名称文件)

View Code

参考链接：

webpack 概述

30分钟掌握ES6/ES2015核心内容（上）

https://babeljs.io/

详解前端模块化工具-webpack

webpack打包经验——处理打包文件体积过大的问题

webpack把我们的业务模块分开打包

webpack 利用Code Splitting 分批打包、按需下载