一、webpack简介

At its core, webpack is a static module bundler for modern JavaScript applications.

从本质上来讲，webpack是一个现代的JavaScript应用的静态模块打包工具。

二、webpack安装

安装webpack首先需要安装Node.js，Node.js自带了软件包管理工具npm

1)查看node版本

2)全局安装webpack

先指定版本号3.6.0，因为vue cli2依赖该版本

3)局部安装

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

4)为什么全局安装后，还需要局部安装呢？在终端直接执行webpack命令，使用的全局安装的webpack

当在package.json中定义了scripts时，其中包含了webpack命令，那么使用的是局部webpack

5)查看webpack版本

三、webpack起步

1)创建相关文件及文件夹

2)使用webpack工具，对多个js文件进行打包

3)index.html中引入

bundle.js文件，是webpack处理了项目直接文件依赖后生成的一个js文件，我们只需要将这个js文件在index.html中引入即可

四、webpack配置

4.1、入口与出口

如果每次使用webpack的命令都需要写上入口和出口作为参数，就非常麻烦，有没有一种方法可以将这两个参数写到配置中，在运行时，直接读取呢？当然可以，就是创建一个webpack.config.js文件

const path = require('path')

module.exports = {

//入口: 可以是字符串/数组/对象

entry: './src/main.js',

output: {

//出口：通常是一个对象

path: path.resolve(__dirname, 'dist'), //绝对路径

filename: 'bundle.js'

},

}

4.2、局部安装webpack

4.3、package.json中定义启动

1)生成package.json文件

2)修改package.json

package.json中的scripts的脚本在执行时，会按照一定的顺序寻找命令对应的位置。首先，会寻找本地的node_modules/.bin路径中对应的命令。如果没有找到，会去全局的环境变量中寻找

3)使用npm run build启动

五、webpack的loader

5.1、什么是loader

5.2、css  loader

5.3、less-loader

5.4、图片文件处理

1)url-loader

2)file-loader

3)修改文件名称

5.5、ES6语法处理

六、webpack配置vue

6.1、引入vue

6.2、打包错误解决

在webpack.config.js中配置：

6.3、el和template区别

6.4、Vue组件化开发引入

6.5、.vue文件封装处理

七、Plugin使用

7.1、认识plugin

7.2、添加版权的Plugin

7.3、打包html的plugin

7.4、js压缩的Plugin

八、搭建本地服务器

九、配置文件分离

1)安装相关插件

2)创建相关文件

base.config.js

注意要修改打包的path，否者会打包到build目录下

const path = require('path')

const webpack = require('webpack')

const HtmlWebpackPlugin = require('html-webpack-plugin')

const UglifyjsWebpackPlugin = require('uglifyjs-webpack-plugin')

module.exports = {

entry: './src/main.js',

output: {

path: path.resolve(__dirname, '../dist'),

filename: 'bundle.js',

// publicPath: 'dist/'

},

module: {

rules: [

{

test: /\.css$/,

// css-loader只负责将css文件进行加载

// style-loader负责将样式添加到DOM中

// 使用多个loader时, 是从右向左

use: [ 'style-loader', 'css-loader' ]

},

{

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

}]

},

{

test: /\.(png|jpg|gif|jpeg)$/,

use: [

{

loader: 'url-loader',

options: {

// 当加载的图片, 小于limit时, 会将图片编译成base64字符串形式.

// 当加载的图片, 大于limit时, 需要使用file-loader模块进行加载.

limit: 13000,

name: 'img/[name].[hash:8].[ext]'

},

}

]

},

{

test: /\.js$/,

exclude: /(node_modules|bower_components)/,

use: {

loader: 'babel-loader',

options: {

presets: ['es2015']

}

}

},

{

test: /\.vue$/,

use: ['vue-loader']

}

]

},

resolve: {

extensions: ['.js', '.css', '.vue'],

alias: {

'vue$': 'vue/dist/vue.esm.js'

}

},

plugins: [

new webpack.BannerPlugin('最终版权归aaa所有'),

new HtmlWebpackPlugin({

template: 'index.html'

})

]

}

View Code

dev.config.js

const webpackMerge = require('webpack-merge')

const baseConfig = require('./base.config')

module.exports = webpackMerge(baseConfig, {

devServer: {

contentBase: './dist',

inline: true

}

})

View Code

prod.config.js

const UglifyjsWebpackPlugin = require('uglifyjs-webpack-plugin')

const webpackMerge = require('webpack-merge')

const baseConfig = require('./base.config')

module.exports = webpackMerge(baseConfig, {

plugins: [

new UglifyjsWebpackPlugin()

]

})

View Code