标签：

webpack的使用

webpack中的代码都是以模块化来进行编写

和gulp的区别：

gulp实现自动化压缩js，css，less代码等，

webpack是把项目的js，，css，less等文件打包成一个或多个，主要用于模块化方案

全局安置

npm install [email protected] -g

局部安置

npm install [email protected] --save-dev

--save-dev是开发时依赖，项目打包后不需要继续使用的。

使用要领

运行如下命令，让webpack自动帮你打包main.js，它会自动帮你措置惩罚惩罚好各类依赖

//3.6.0用法 webpack ./src/main.js ./dist/bundle.js //4.0用法 webpack ./src/main.js -o ./dist/bundle.js

手动配置package

npm init

package全局与本地命令

当直接在终端运行命令时在全局环境中查找，

如果给package中script设置命令，则优先在本地查找

配置webpack.config.js

const path = require('path') module.exports = { entry : './src/main.js', output : { //resolve拼接当前目录，绝对路径 path:path.resolve(__dirname,'dist'), filename:'bundle.js' } }

注意：

直接在终端运行webpack是在全局环境中运行，

要使用本地可以在package中配置script，然后npm run build即可

运行package中script的时候，会此刻局部环境中寻找，找不到再去全局

loader

在开发中，我们不只要措置惩罚惩罚js文件，还要将cs，typescript，图片，es6等转换成浏览器能够措置惩罚惩罚的文件
，只有webpack是做不到那么多的，所以需要安置扩展loader

使用要领：

通过npm安置需要使用的loader

在webpack.config.js中的module关键字下进行配置

css-loader使用注意

使用css-loader时，只是将css文件加载，还需要再安置style-loader进行衬着dom树

module中的use法则，读取挨次是从右向左，所以应该先写style-loader，再写css-loader

url-loader的使用

当css引入图片时，需要添加并配置url-loader。

图片文件字节小于limit时，会对图片进行base64编码，css中url通过base64编码显示

如果图片大于limit时，则会提示安置file-loader。（limit默认=8kb）

file-loader的使用

url-loader和file-loader的配置文件只能使用一个

开发时如果图片和html不在同一个文件夹，可以在webpack.config.js里output中设置publicPath:‘dist/‘ 。
就会默认引用该路径中的文件

和url-loader的区别：

打包时file-loader会把图片进行哈希值定名并一起打包进dist文件夹中

url-loader只是作为base64字符串来使用，不需要存储单独文件

开发中打包图片我们想要使用本来的名字，可以在options中自界说文件的名字

options: { //img文件夹中，本来文件名+8位哈希值+原格局extension的缩写 name:'img/[name].[hash:8].[ext]' }

babel => es6语法措置惩罚惩罚

webpack打包的js文件中还存在es6语法，由于部分浏览器不撑持es6，所以我们需要帮它转换成es5

安置要领：

npm install --save-dev [email protected] babel-core babel-preset-es2015

配置直接去官网找，把presets改成es2015即可

配置vue

vue运行时也需要依赖，所以安置时不用添加-dev

npm install vue --save

注意：

vue模块导出时使用的export default要领，所以导入不用加大括号{}。

import Vue from 'vue'

vue.runtime-only版本不成以有template。但vue实例默认就是template，所以打包时报错。
应该切换包罗compiler的版本

//在webpack.config中配置，和module同级 resolve:{ //alias:别号。切换vue版本 alias:{ //esm:esmodule 'vue$':'vue/dist/vue.esm.js' } }

引用组件时必需写扩展名，我们也可以设置，使不写扩展名也可引用

//在webpack.config中配置，和module同级 resolve:{ //alias:别号。切换vue版本 alias:{ //esm:esmodule 'vue$':'vue/dist/vue.esm.js' }, //extensions:扩展名 extensions:['.js','.css','vue'] }

我们引用vue时直接写import app from ‘App‘即可

vue文件封装措置惩罚惩罚

安置vue-loader和template-compiler

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

配置文件

Vue Loader 的配置和其它的 loader 不太一样。除了通过一条法则将 vue-loader 应用到所有扩展名为 .vue 的文件上之外，
请确保在你的 webpack 配置中添加 Vue Loader 的插件：

//引用插件，将下行代码添加至webpack.config头部 const { VueLoaderPlugin } = require('vue-loader'); //配置vue-loader module.exports = { module: { rules: [ { test: /\.vue$/, loader: 'vue-loader' } ] }, plugins: [ // new一个插件，并记得引用！ new VueLoaderPlugin() ] }

plugin插件

webpack中的插件，就是对webpack现有成果的各类扩展，好比打包优化，文件压缩等等。

使用要领：

通过npm安置需要使用的plugins(某些webpack已经内置的插件不需要安置)