webpack的基本使用

概念一、webpack的起步二、webpack的配置三、webpack的loader

概念

webpack是一个现代的JavaScript应用程序的静态模块打包器。是处理各个文件之间依赖关系的工具。 当在代码中使用CommonJS模块化规范、ES6模块化规范或其他规范时，可以解决各个文件之间的相互依赖，并且读懂某些规范的含义。 CommonJS模块化规范举例： 导入与导出：

const { add, mul } = require('./mathUtils.js') module.exports = { add, mul }

ES6模块化规范举例： 导入与导出：

import {name, age, height} from './info.js' //导入 export const name = 'why' //导出 export default function() { //导出默认值 console.log('18'); }

在没有用webpack前，代码本身是不能识别CommonJS模块化的。利用webpack就可以使浏览器识别模块。

一、webpack的起步

如果自己手动配置项目的话，首先在项目目录下创建两个文件夹，为dist与src文件夹，文件夹中的包含的文件如下：

在命令行输入：webpack ./src/main.js ./dist/bundle.js，就会在dist文件夹中生成bundle.js文件。 其中，main.js文件表示项目的js入口文件，dist文件夹为项目发布时需要上传到服务器的文件夹，其中的bundle.js文件为输出文件。而index.html文件为运行项目的入口文件。

二、webpack的配置

1.首先使用下载node，利用node环境，以及node本身自带的npm(包管理工具)。 2.在文件夹中创建一个webpack.config.js文件，来配置文件的入口与出口，如下所示：

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

3.在命令行输入npm init来生成package.json文件，来进行管理项目运行时所依赖的文件，创建的过程如下所示：(配置选择默认的就可以了) 获得的package.json文件内容大致如下：

{ "name": "meetwebpack", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "-", "bulid": "webpack" }, "author": "", "license": "ISC", "devDependencies": { "webpack": "^3.6.0" } }

4.再利用npm install安装项目运行时依赖的文件（如webpack.config.js中的path文件）。 5.此时在终端输入webpack运行，就会发现webpack将生成新的文件即bundle.js文件(在dist文件夹)，此时该文件已经解决的各个文件之间的模块依赖。

在package.json文件中输入输入以下代码，可以使在打包文件时，输入npm run build即可

三、webpack的loader

1.webpack中使用css文件的配置

①首先在src文件夹中创建一个css文件夹； ②在文件夹中创建一个normal.css文件； ③在main.js中用require('./css/normal.css')导入这个文件； ④找到webpack官网¹点击中文文档，找到loaders按钮。

⑤此时会看到关于loaders的简介(webpack可以使用loader来预处理文件）； ⑥找到我们所需要的css-loader，进入之后会发现特别详细的介绍；

安装css-loader

npm install --save-dev css-loader

用法 webpack.config.js

module.exports = { module: { rules: [ { test: /\.css$/, use: [ 'style-loader', 'css-loader' ] } ] } }

⑦再次在命令行运行npm run build就会得到新打包好的文件。

2.webpack-less文件的处理

①在./src/css文件夹中创建special.less文件； ②在main.js文件中利用require('./css/special.less')导入文件； ③找到webpack官网点击中文文档，在loaders模块中找到less-loader；

安装less-loader

npm install --save-dev less-loader less

The less-loader requires less as peerDependency. Thus you are able to control the versions accurately.

module.exports = { ... module: { rules: [{ test: /\.less$/, use: [{ loader: "style-loader" // creates style nodes from JS strings }, { loader: "css-loader" // translates CSS into CommonJS }, { loader: "less-loader" // compiles Less to CSS }] }] } };

④再次在命令行运行npm run build就会得到新打包好的文件 3.webpack-图片文件的处理

①在src文件夹中创建img文件夹，并放入一张图片src/img/cache.jpg，图片大小约为40kb； ②在normal.css中利用background: url('../img/cache.jpg');将图片设置为页面背景； ③找到webpack官网点击中文文档，在loaders模块中找到url-loader；

安装url-loader

npm install --save-dev url-loader

webpack.config.js

module.exports = { module: { rules: [ { test: /\.(png|jpg|gif)$/, use: [ { loader: 'url-loader', options: { limit: 8192 } } ] } ] } }

url-loader 功能类似于 file-loader，但是在文件大小（单位 byte）低于指定的限制时，可以返回一个 DataURL。

④因为此时文件的大小大于限制的limit，所以进行编译时会出现错误，此时按照错误提示进行file-loader的安装即可(或将limit设置成大于图片大小，那么此时就不需要安装file-loader）；

安装file-loader

npm install --save-dev file-loader

默认情况下，生成的文件的文件名就是文件内容的 MD5 哈希值并会保留所引用资源的原始扩展名。

注：若已经安装了url-loader，则此时不需要再在webpack.config.js中进行配置。

生成文件 file.png，输出到输出目录并返回 public URL。如"/dist/0dcbbaa7013869e351f.png" 其中输出目录需要在webpack.config.js中进行配置，代码如下：(如果不配置publicPath，则打包产生的图片就会直接在src文件夹中，不会存在dist文件夹中，那么发布项目时就得不到想要的效果)

module.exports = { entry: './src/main.js', output: { path: path.resolve(__dirname, 'dist'), filename: 'bundle.js', publicPath: 'dist/' //涉及url的文件，都会在地址前加上dist/ }, ...... }

此时生成的图片名称是由32位哈希值组成的，比较杂乱无章，可以在配置url-loader时，进行图片命名，代码如下(配置完成后，图片的地址就位于./dist/img/文件夹中）：

{ test: /\.(png|jpg|gif|jpeg)$/, use: [{ loader: 'url-loader', options: { //当加载的图片小于limit时，会将图片编译成base64字符串形式 //当加载的图片大于limit时，需要使用file-loader模块进行加载 limit: 10000, name: 'img/[name].[hash:8].[ext]' } }] }

img：文件要打包到的文件夹 name：获取图片原来的名字，放在该位置 hash:8：为了防止图片名称冲突，依然使用hash，但是我们只保留8位 ext：使用图片原来的扩展名

④再次在命令行运行npm run build就会得到新打包好的文件，预览如下:

4.webpack-ES6转ES5的babel ①仔细阅读webpack打包的js文件，会发现写的ES6语法并没有转换成ES5，那么意味着可能一些ES6还不支持的浏览器没有办法很好的运行我们的代码 ②如果希望将ES6语法转换成ES5，那么就需要使用babel ③找到webpack官网点击中文文档，在loaders模块中找到babel-loader；

安装babel-loader

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

配置webpack.config.js

module: { rules: [ { test: /\.js$/, exclude: /(node_modules|bower_components)/, use: { loader: 'babel-loader', options: { presets: ['es2015'] } } } ] }

④再次在命令行运行npm run build就会得到新打包好的文件，查看bundle.js文件，发现其中的内容变成了ES5的语法。

5.webpack使用Vue的配置过程

①希望在项目中使用Vue.js，那么必须需要对其有依赖，所以需要进行安装；

安装vue

npm install vue --save

注：因为后续是在实际项目中也会使用Vue的，所以并不是开发时依赖

②在使用时首先导入Vue；

import Vue from 'vue' //此行导入vue // import App from './vue/app.js' import App from './vue/App.vue' new Vue({ el: '#app', template: `<App/>`, components: { App } })

③打包项目并运行程序，出现错误(错误说我们使用的是runtime-only版本的Vue)，此时需要在webpack.config.js中添加如下内容即可：

④再次在命令行运行npm run build就会得到新打包好的文件。

6..vue文件的封装处理 ①创建一个.vue文件如下：

<template> <div> <h2 class="title">{{message}}</h2> <button>按钮</button> <Cpn></Cpn> </div> </template> <script> import Cpn from './Cpn.vue' export default { data() { return { message: 'hello webpack' } }, components: { Cpn } } </script> <style scoped="scoped"> .title { color: yellow; } </style>

②这个文件不能被正常的加载，所以需要安装vue-loader与vue-template-compiler

安装vue-loader与vue-template-compiler

npm install vue-loader vue-template-compiler --save-dev

③修改webpack.config.js配置文件如下：

{ test: /\.vue$/, use: ['vue-loader'] }

④再次在命令行运行npm run build就会得到新打包好的文件。

---

关于上述所依赖的包的版本如下：

webpack npm install webpack@3.6.0 css-loader npm install css-loader@2.0.2 --save-dev style-loader npm install style-loader@0.23.1 --save-dev less-loader npm install --save-dev less-loader@4.1.0 less@3.9.0 url-loader npm install --save-dev url-loader@1.1.2 es6转换成es5 npm install --save-dev babel-loader@7.1.5 babel-core@6.26.3 babel-preset-es2015@6.24.1 Vue npm install vue@2.5.21 --save

---

webpack中文官网 ↩︎