vue基础篇 08 webpack基础(一)

08 webpack基础(一)

安装

在 cmd 中 输入

node -v

可以查看版本，然后全局安装webpack（vue cli2依赖于3.6.0版本）

npm install webpack@3.6.0 -g

创建文件夹以及文件

dist文件夹

用于存放webpack打包后的文件

src文件

用于存放自己写的源文件

比如

main.js 项目的入口文件。

const math = require('./mathUtils')//CommonJs的导入写法

console.log('hello webpack');
console.log(math.add(10,20));
console.log(math.mul(10,20));

mathUtils.js 定义了一些数学工具函数的文件

function add(num1, num2) {
  return num1 + num2
}

function mul(num1, num2) {
  return num1 * num2
}

module.exports = {
  add,
  mul
}

index.html

首页html

package.json

通过npm init生成的，npm包管理的文件

生成的代码

{
  "name": "demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

js文件的打包

webpack 入口文件 出口文件

通过cd指令移动到项目位置后执行

webpack src/main.js dist/bundel.js

可能会报错，例如

无法加载文件 C:\Users\dell\AppData\Roaming\npm\webpack.ps1，因为在此系统上禁止运行脚本。

那就需要通过管理员权限打开powershell使用

set-ExecutionPolicy RemoteSigned

当弹出

执行策略更改 执行策略可帮助你防止执行不信任的脚本。更改执行策略可能会产生安全风险，如 https:/go.microsoft.com/fwlink/?LinkID=135170 中的 about_Execution_Policies 帮助主题所述。是否要更改执行策略? [Y] 是(Y) [A] 全是(A) [N] 否(N) [L] 全否(L) [S] 暂停(S) [?] 帮助 (默认值为“N”):

时，输入Y，来改变其策略，并在powershell再次运行

webpack src/main.js dist/bundle.js

当弹出

Hash: 091cf681a54ac6cb0146 Version: webpack 3.6.0 Time: 37ms Asset Size Chunks Chunk Names bundle.js 2.85 kB 0 [emitted] main [0] ./src/main.js 151 bytes {0} [built] [1] ./src/mathUtils.js 148 bytes {0} [built]

就意味着打包成功了。dist文件夹下生成了一个bundle.js文件，这是webpack处理了项目直接文件依赖后生成的一个js文件，我们只需要将这个js文件在index.html中引入即可

webpack

如果每次使用webpack的命令都需要写上入口和出口作为参数，就非常麻烦，所以可以将这两个参数写到配置中，这时候就需要创建一个webpack.config.js文件

const path = require('path')

module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
}

有了这一个文件就只需要在终端输入

webpack

就可以完成前面的操作

局部安装webpack

步骤

1.局部安装webpack3.6.0

通过cd到项目位置后运行指令

npm install webpack@3.6.0 --save-dev

2.通过

node_modules/.bin/webpack

启动webpack打包，和前面讲述的两种方式打包看上去效果一致，但是前两种都是通过全局的webpack打包的，而最后这种是使用局部的webpack打包的

package.json中定义启动

每次执行之前都敲 node_modules/.bin/webpack这么长的代码也不方便，所以可以给package.json的scripts添加执行脚本

 "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
     "build":"webpack"
 },

• package.json中的scripts的脚本在执行时，会按照一定的顺序寻找命令对应的位置。

  • 首先，会寻找本地的node_modules/.bin路径中对应的命令。

  • 如果没有找到，会去全局的环境变量中寻找

执行

 npm run build

来执行build指令

loader

目的

• 在开发中我们不仅仅有基本的js代码处理，我们也需要加载css、图片，也包括一些高级的将ES6转成ES5代码，将TypeScript转成ES5代码，将scss、less转成css，将.jsx、.vue文件转成js文件等等。
• 对于webpack本身的能力来说，对于这些转化是不支持的。
• 所以需要给webpack扩展对应的loader

步骤

1. 通过中文官方文档https://webpack.docschina.org/loaders/查找到对应的loader
2. 根据loader对应的安装代码（npm）安装相应loader
3. 在webpack.config.js中的modules关键字下进行配置

例子

安装 css-loader 加载 CSS 文件并解析 import 的 CSS 文件，最终返回 CSS 代码

1. 找到该loader的中文官方文档 https://webpack.docschina.org/loaders/css-loader/

2. 找到npm代码并在项目文件下运行它

   npm install --save-dev css-loader
   

3. 在webpack.config.js中的modules关键字下配置

   module: {
       rules: [
           {
               test: /\.css$/i,
               use: ["css-loader"],
           },
       ],
   }
   

对应的loader

less-loader

webpack 将 Less 编译为 CSS 的 loader

https://webpack.docschina.org/loaders/less-loader/

url-loader

v5 后弃用：请考虑使用 asset modules 代替。

用于将文件转换为 base64 URI 的 loader。

https://webpack.docschina.org/loaders/url-loader/

babel-loader

ES6语法处理，将ES6的语法转成ES5

npm install --save-dev babel-loader@7 babel-core babel-preset-es2015

webpack.config.js