1.1、安装 webpack 全局
安装命令：
全局安装
@3.6.0：为版本号
-g :为全局
npm install webpack@3.6.0 -g
执行打包命令：
./src/main.js :被打包的文件
./dist/build.js：打包后的文件
webpack ./src/main.js ./dist/build.js
1.2、webpack.config.js配置和package.json 配置
webpack.config.js 配置文件是用来配置 webpack 打包文件的入口文件路径和出口文件路径，可以让我们简写命令的方式进行打包，以前的命令是 webpack ./src/main.js ./dist/build.js，现在配置后我们可以直接写 webpack 命令 生成打包后的文件。
webpack.config.js 【名字不可修改，路径必须在根目录下】配置代码如下：
const path = require('path');
module.exports = {
//入口
entry: './src/main.js',
//出口
output: {
path: path.resolve(__dirname,'dist'),
filename: 'builder.js'
}
}
const path = require('path'); 必须引入node.js的包，需要执行初始化命令：
//一路next 就可以
npm init
执行完命令后，他将生成一个json文件，也就是package.json。
在实际的项目中，一般不会使用webpack这种命令，一般会使用 npm run .. 命令，这种命令需要在package.json配置进行映射，代码如下：
{
"name": "webpackdemo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build":"webpack"
},
"author": "",
"license": "ISC"
}
这个 "build":"webpack" 就是我们配置出打包命令： 注意：在终端执行npm run build，它将去json文件scripts标签下找到build，然后执行 webpack脚本命令，
npm run build
开发过程中，一般安装完全局webpack后还得在项目中安装一个本地的webpack，安装命令如下：
//开发时依赖
npm install webpack@3.6.0 --save-dev
1.3、webpack 使用css文件
官方文档：https://webpack.docschina.org/
loader：【核心】将css、图片、高级的ES6语法转化成ES5 代码等等，就得需要loader进行转换。
不同的文件处理需要不同的loader。
安装lloder之前，首先必须给css文件建立依赖
在main.js文件中引用css文件：
import css from "./css/style.css";
安装loader命令
//第一步 通过 npm 安装 loader 开发时依赖 webpack 是 3.6.0的版本，安装loder也应该对应的相应的版本，要不然会报 ：UnhandledPromiseRejectionWarning: TypeError: this.getResolve is not a function 错误
//加载css文件 loader
npm install --save-dev css-loader@3.6.0
// 将样式添加到dom中的 loader
npm install --save-dev style-loader@0.23.1
//第二步 在webpack.config.js中的modules关键字下进行配置 详情看官方文档
module:{
rules: [
{
test: /\.css$/i,
//css-loader 只负责加载css文件
//style-loader 将样式添加到dom中
use: [ 'style-loader', 'css-loader' ],
},
]
}
webpack 3.6.0 对应的版本：
"css-loader": "^1.0.1",
"less": "^3.9.0",
"less-loader": "^5.0.0",
"style-loader": "^0.23.1",
"url-loader": "^2.1.0",
"vue-loader": "^13.0.0",
"vue-template-compiler": "^2.6.10",
"webpack": "^3.6.0"
1.4、webpack less文件处理
代码如下：
//安装less-loader，命令如下： webpack 版本为 3.6.0
npm install less@3.9.0 less-loader@5.0.0 --save-dev
webpack.config.js 配置如下：
module: {
rules: [
//css-loader 和 style-loader
{
test: /\.css$/i,
use: ["style-loader", "css-loader"],
},
//less-loader
{
test: /\.less$/i,
use: [
{
loader: "style-loader"
},
{
loader: "css-loader"
},
{
loader: "less-loader"
}
],
}
]
}
-
5、webpack 图片处理
1）、先有两张图片，一个是大于8kb，一个小于8kb，因为配置中它将以不同的方式展示图片
2）、在css文件中使用图片做为背景
background: url("../imgs/12.jpg");3）、安装加载图片用到的loader，并配置loader
npm install --save-dev url-loader@2.3.0
module: {
rules: [
{
test: /\.(png|jpg|gif)$/,
use: [
{
loader: 'url-loader',
options: {
//当图片加载图片的大小大于 limit 它将使用file-loader加载图片
//当图片加载时图片的大小小于 limit 他将图片编译成base64的方式显示图片
limit:8159,
//将图片打包到dist其他文件夹下，并更改图片名称
//img： 新建的文件夹
//[name].[hash:8].[ext] :name :原来的文件名 hash:8：将哈希值截取8位 ext:原来文件的扩展名
name:"img/[name].[hash:8].[ext]"
},
}
]
}
]
}
npm install --save-dev file-loader@3.0.1 //只安装不需要配置
//如果图片大小大于limit值，他将会以file-loader形式加载图片，如果没有配置图片的路径，它将找不到图片，需要在webpack.config.js文件配置：[在出口文件中进行配置]
module.exports = {
//打包入口文件
entry: './src/main.js',
//打包出口文件
output: {
...........
publicPath:'../dist/'
}
总结：
当图片加载图片的大小大于 limit 它将使用file-loader加载图片。
当图片加载时图片的大小小于 limit 他将图片编译成base64的方式显示图片。
如果执行打包命令后需要将打包后的文件放到其他文件加下，需要在url-loader中选项中进行配置：
name:"img/[name].[hash:8].[ext]"
img : 文件夹名称
[name]：原来文件的名称
[hash:8]：哈希值截取8位
[ext]：文件的扩展名
1.6、webpack ES6装换ES5的babel
//安装命令
npm install --save-dev babel-loader@7 babel-core babel-preset-es2015
//webpack.config.js中 module 增加 loder 配置 ，如下
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['es2015']
}
}
}
1.7、webpack 使用 Vue
1）安装Vue
npm install vue --save
2）、在webpack.config.js中进行配置：
module: {
rules: [
........
resolve:{
alias:{
'vue$':'vue/dist/vue.esm.js'
}
}
3)、在js文件中引用vue：
import Vue from 'vue'
const app = new Vue({
el:"#app"
});
1.8、创建Vue时template与el的关系
index.html 代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id ="app">
</div>
<script src="../dist/build.js"></script>
</body>
</html>
main.js 代码如下：
import Vue from "vue";
new Vue({
el: '#app',
template: `
<div>{{mess}}</div>
`,
data: {
mess: "您好"
}
});
总结：
在Vue实例化中加上template属性后，他会将el绑定的dom对象替换成template中的html内容。
1.9、Vue终极使用方案 将Vue实例中template抽离
1）、 安装 Vue -loader ：
npm install vue-loader@13.0.0 vue-template-compiler --save-dev
##webpack.config.js 增加 vue-loader 配置
{
test: /\.vue$/i,
use: ["vue-loader"],
}
2）、 index.html 代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id ="app">
</div>
<script src="../dist/build.js"></script>
</body>
</html>
3）、新建Vue文件夹，文件夹下建App.vue，代码如下：
<template>
<div class ="title">{{mess}}</div>
</template>
<script>
export default {
name:"App",
data(){
return{
mess: "您好"
}
}
}
</script>
<style scoped>
.title{
color:green;
}
</style>
4）、在main.js中导入vue文件，代码如下：
import app from "./vue/App.vue"
- 0、webpack Plugin 核心
Plugin是什么
Plugin插件的意思，通常是用于对某个现有的架构进行扩展。
webpack中的插件，就是对webpack现有的功能的各种扩展，比如优化、打包、文件压缩等等。
loader与plugin的区别
loader：主要用于转换某些类型的模块，他是一个转换器。
plugin：是插件，它是对webpack本身的一个扩展，是一个扩展器。
plugin的安装：
是通过npm对plugin进行安装。
在webpack.config.js 中进行配置。
添加版权 plugin 插件：不需要用 npm安装，webpack 中自带
//在webpack.config.js中添加 版权声明插件的配置
//1) 导入webpack
const webpack =require('webpack');
//2) 在 module 配置插件
module.exports = {
........
//样式loder配置
module: {
...
},
//Vue配置
resolve:{
........
},
//插件配置
plugins:[
new webpack.BannerPlugin("版权信息名称！")
]
}
2.1、webpack-HtmlWebpackPlugin 使用
HtmlWebpackPlugin是将项目中的html文件打包到dist文件中去，命令：
npm install html-webpack-plugin --save-dev
//增加引用：
const HtmlWebpackPlugin = require('html-webpack-plugin');
//增加配置：
//配置打包的html文件
module.exports = {
........
//样式loder配置
module: {
...
},
//Vue配置
resolve:{
........
},
plugins:[
//配置打包的html文件
new HtmlWebpackPlugin({
template:'index.html'
})
]
}
2.2、webpack-UglifyjsWebpackPligin js压缩插件
安装命令：
npm install uglifyjs-webpack-plugin@1.1.1 --sava-dev
在webpack.config.js 中进行配置：
//导入包
uglifyJsPlugin =require('uglifyjs-webpack-plugin');
//增加配置：
//配置压缩
module.exports = {
........
//样式loder配置
module: {
...
},
//Vue配置
resolve:{
........
},
plugins:[
//配置压缩
new uglifyJsPlugin()
]
}
2.3、webpack-dev-server 搭建本地服务器
安装命令：
npm install --save-dev webpack-dev-server@2.9.1
在webpack.config.js中增加配置：
module.exports = {
........
//样式loder配置
module: {
...
},
//Vue配置
resolve:{
........
},
plugins:[
//配置压缩
new uglifyJsPlugin()
],
//增加本地服务器配置
devserver:{
contentBase:"./dist",
inline:true
}
}
在package.json中增加执行脚本配置：
##--open将自动打开浏览器
"scripts": {
"dev":"webpack-dev-server --open"
}
然后运行命令：
npm run dev
