1.创建一个项目目录，最好不要带中文

2.初始化本地包的介绍文件

npm init -y

3.全局安装webpack和webpack-cli，同时在项目本地安装webpack和webpack-cli

npm install webpack -gnpm install webpack-cli -gnpm install webpack --save-dev （等同于命令npm install webpack -D）向开发环境添加依赖npm install webpack-cli -D

4.webpack的作用

假设下面是main.js文件，并且被我们的html文件引用

import $ from 'jquery' $(function () { $('li:odd').css('backgroundColor','red'); $('li:even').css('backgroundColor','blue');})

<script src='./main.js'></script>

此时，浏览器会报错，因为浏览器识别不了这种语法，而引入webpack就可以解决这个问题
先后台执行命令生成打包文件

webpack ./src/main.js -o ./dist/bundle.js

再由html文件引入这个打包文件

<script src='../dist/bundle.js'></script>

得出结论：webpack可以做两件事情
1.处理JS文件的互相依赖关系；
2.处理JS的兼容问题，把高级的、浏览器不识别的语法，转为低级的，浏览器能正常识别的语法

5.配置入口文件和出口文件

在项目根目录下新增一个webpack.config.js文件，在文件中配置出口和入口,配置完，后台直接wenpack就可以生成打包文件了

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

6.自动编译工具

• 下载自动编译工具 webpack-dev-server npm i webpack-dev-server -D
• package.json文件中配置scripts 设置webpack-dev-server的执行命令

 "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "dev": "webpack-dev-server" },

• npm run dev 执行
• 命令执行完以后，webpack-dev-server在node中开启了一个服务器，服务器的地址是 http://localhost:8080（协议+域名+端口号）,同时，打包生成的bundle.js文件在这个服务器的根目 录下，但是这个文件在根目录下找不到，虽然它与src平级，其实它是以虚拟的形式托管在内存中,其目的是为了方便频繁的打包，加快速度，所以放在内存中
• 此时因为项目已经托管到了服务器中，bundle.js的引用路径是
• index.html的访问路径是http://localhost:8080/src/index.html

7.自动打开浏览器进行访问、配置端口号、指定托管的根目录、热重载（只是修改补丁，不重新生成整个bundle.js文件）

有两种方法：

• 1.在package.json中配置命令，并重启服务器：

"dev": "webpack-dev-server --open --port 3000 --contentBase src --hot"

• 2.在webpack.config.js配置文件中配置devServer对象

const path = require('path')module.exports = { entry: path.join(__dirname,'./src/main.js'), output: { path: path.join(__dirname,'./dist'), filename: 'bundle.js' }, // 这个配置完以后，后台直接webpack就可以按照配置的输入和输出的目录打包文件了 devServer: { open: true, port: 4000, contentBase: 'src', hot: true },}

8.安装html-webpack-plugin插件

先下载

npm i html-webpack-plugin -D

html-webpack-plugin插件的两个作用

• 自动在内存中根据指定页面生成一个内存中的页面
• 自动把打包好的 bundle.js 追加到页面中去

在webpack.config.js配置文件中配置插件

const htmlWebpakPlugin = require('html-webpack-plugin')const path = require('path')module.exports = { entry: path.join(__dirname,'./src/main.js'), output: { path: path.join(__dirname,'./dist'), filename: 'bundle.js' }, // 这个配置完以后，后台直接webpack就可以按照配置的输入和输出的目录打包文件了 devServer: { open: true, port: 4000, contentBase: 'src', hot: true }, plugins: [ new htmlWebpakPlugin({ template: path.resolve(__dirname, 'src/index.html'),//模板路径 filename: 'index.html'//自动生成的HTML文件的名称 }) ],}

9.处理样式文件

html文件中需要引入css、less、sass样式文件。默认情况下，webpack处理不了这些样式文件

处理CSS文件

• 1.下载插件

npm i style-loader css-loader --save-dev 

• 2.导入css文件

import './css/index.css'

• 3.webpack.config.js中配置module对象

const path = require('path')const htmlWebpakPlugin = require('html-webpack-plugin')module.exports = { entry: path.join(__dirname,'./src/main.js'), output: { path: path.join(__dirname,'./dist'), filename: 'bundle.js' }, // 这个配置完以后，后台直接webpack就可以按照配置的输入和输出的目录打包文件了 devServer: { open: true, port: 4000, contentBase: 'src', hot: true }, plugins: [ new htmlWebpakPlugin({ template: path.resolve(__dirname, 'src/index.html'),//模板路径 filename: 'index.html'//自动生成的HTML文件的名称 }) ], module: { rules: [ {test: /\.less$/,use: ['style-loader','css-loader','less-loader']}, //处理less文件的规则 { test: /\.css$/, use: ['style-loader', 'css-loader'] }//处理css文件的规则, ] }}

处理less文件

• 1.下在loader

npm install --save-dev less-loader less

• 2.导入文件

import './css/index.less'

• 3.webpack.config.js中配置module对象

const path = require('path')const htmlWebpakPlugin = require('html-webpack-plugin')module.exports = { entry: path.join(__dirname,'./src/main.js'), output: { path: path.join(__dirname,'./dist'), filename: 'bundle.js' }, // 这个配置完以后，后台直接webpack就可以按照配置的输入和输出的目录打包文件了 devServer: { open: true, port: 4000, contentBase: 'src', hot: true }, plugins: [ new htmlWebpakPlugin({ template: path.resolve(__dirname, 'src/index.html'),//模板路径 filename: 'index.html'//自动生成的HTML文件的名称 }) ], module: { rules: [ {test: /\.less$/,use: ['style-loader','css-loader','less-loader']}, { test: /\.css$/, use: ['style-loader', 'css-loader'] }//处理css文件的规则, ] }}

10.使用Vue

首先介绍导包的规则

• 找node_modules文件夹
• 在node_modules中根据包名，找vue 文件夹
• 在vue文件夹中，找package.json配置文件

• 在package.json配置文件中，查找main属性，（这个main属性指定了包被加载的时候的入口文件）　

• 1.本地下载Vue npm i vue -D
• 2.正确的导包，有两种方法

import Vue from '../node_modules/vue/dist/vue.js' （main属性所指向的文件功能不全，这个才是完整的文件）

import Vue from 'vue'，再配置webpack.config.js文件　　　　　　resolve: { 　　　　　　alias: { 　　 　　　　"vue$": "vue/dist/vue.js" 　　　　　　} 　　　　　　}

• 3.使用.vue组件模板文件定义组件

1.安装loader npm i vue-loader vue-template-compiler -D2.定义一个.vue结尾的组件文件，组件有三部分组成，template script style （style并且加scoped属性 使样式只作用与当前组件）3.使用import login from './login.vue'导入组件4.修改webpack.config.js配置文件 - module加一条匹配规则 {test: /\.vue$/,use: 'vue-loader'} - plugin加一个对象　　　　　　　　const VueLoaderPlugin = require('vue-loader/lib/plugin');　　　　　　　　new VueLoaderPlugin()

11.在webpack中使用vue-router

1.下载vue-router npm i vue-router -D2.导包　import Vue from 'vue';　import VueRouter from 'vue-router'3.手动安装VueRouter　Vue.use(VueRouter)

12.webpack处理ES6语法

借助第三方loader处理高级语法，loader将高级语法转换为低级语法后，结果交给webpack打包到bundle.js
通过Babel,可以将高级语法转换为低级语法，使用方式如下

1.下载包npm install babel-loader babel-core babel-preset-env -Dnpm i @babel/plugin-transform-runtime -Dnpm i @babel/runtime -Dnpm i @babel/core@^7.0.0 -Dnpm i @babel/preset-env -Dnpm i @babel/plugin-proposal-class-properties -Dnpm i babel-loader @babel/core @babel/runtime @babel/preset-env @babel/plugin-proposal-class-properties @babel/plugin-transform-runtime -D2.打开webpack的配置文件，再module节点下的rules数组中，添加一个新的匹配规则　　{test: /\.js$/,use: 'babel-loader',exclude: /node-modules/} exclude配置是为了排除对modules中JS文件的转化3.在项目的根目录中，新建一个叫做.babelrc的babel配置文件，这个文件是JSON格式，所以，在书写的时候，必须符合JSON规则，不能写注释，字符串必须用双引号4.在.babelrc文件中写如下的配置：preset可以翻译成语法　　{　　　　"presets": ["@babel/preset-env"],　　　　"plugins": ["@babel/plugin-transform-runtime","@babel/plugin-proposal-class-properties"]　　}