一、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