目录
如果还没了解npm请参考webpack安装前准备
创建文件目录
创建文件
project_name
├── dist
├── src
│ ├── css
│ ├── images
│ ├── js
│ ├── index.html
│ └── main.js //项目入口文件
初始化
操作
在本项目下的终端输入：npm init -y
注：
-y 参数表示默认所有选项 yes
效果
project_name
├── dist //打包后生成的目录文件
├── src
│ ├── css
│ ├── images
│ ├── js
│ ├── index.html
│ └── main.js //项目入口文件
├── `package.json` //多了个项目的配置文件
package.json文件，这个文件中会记录一些关于项目的信息，比如：项目的作者，git地址，入口文件、命令设置、项目名称和版本号等等，一般情况下这个文件是必须要有的，方便后续的项目添加和其他开发人员的使用。
安装webpack
操作
在本项目下的终端输入以下两条命令：
npm i webpack --save-dev 或 -D
npm i webpack-cli --save-dev 或 -D
注：
在 webpack4 中不仅要安装 webpack 本身，还要安装 webpack-cli
–save、-S 参数意思是把模块的版本信息保存到dependencies（生产环境依赖）中，即你的package.json文件的dependencies字段中；
–save-dev 、-D 参数意思是吧模块版本信息保存到devDependencies（开发环境依赖）中，即你的package.json文件的devDependencies字段中；
效果
文件目录
project_name
├── dist
├── src
├── package.json
├── `mode_modules` //多了个mode_modules文件夹
├── `package-lock.json` //多了个packge-lock.json文件
package.json
{
"devDependencies": { //生产依赖环境
"webpack": "^4.41.1" //有了webpack
}
}
安装依赖
操作 (这里以 jquery 为例)
1.安装jquery
在本项目下的终端输入：
npm i jquery --save 或 -S
2.在入口文件导入安装好的jquery
//main.js
import $ from 'jquery' //在入口文件中导入jquery
$(function () { //这里为测试代码
$('li').css('color','#b89')
}
loader
webpack 自身自能读懂js类型的文件，像ES6、JSX、less、typescript 等，甚至css、images 这些文件想要编译打包需要借助 loader
操作 ( 加载 css 和 less )
终端
npm i style-loader css-loader -D //安装 css 相对应的loader
npm i less less-loader -D //安装 less 相对应的loader
注：
style-loader 负责把处理完的css放到html头部
css-loader 负责处理css
webpack.config.js
module.exports = {
module: {
rules: [ //规则
{ test: /\.css$/, use: [ 'style-loader', 'css-loader'] },
{ test: /\.less$/, use: [ 'style-loader', 'css-loader', 'less-loader' ] }
]
}
}
注：
style-loader 和 css-loader 的顺序不能调换，Loader的执行顺序是由后往前的
效果
我们就可以在入口文件引入 css 和 less
import './src/main.css'
操作 ( 加载 图片 )
终端
npm i url-loader -D //安装 url-loader
npm i file-loader -D //安装 file-loader
webpack.config.js
module.exports = {
module: {
rules: [ //规则
{
test: /\.(jpg|png|gif)$/,
loader: "url-loader",
include: [ path.resolve(__dirname,'src') ],
options: {
limit: 10000,
name: "images/[name].[hash:7].[ext]"
}
}
]
}
}
注：
url-loader 可以设置图片大小限制，当图片大小超过 limit 限制时，其表现行为等同于 file-loader，而当图片不超过限制时，则会将图片以 base64 的形式打包经行 css 文件，以减少请求次数
limit 图片大小限制
include 想要对图片进行 url-loader 转换的文件夹
操作 ( ES6 语法转换 )
终端
npm i babel-loader @babel/core @babel/preset-env -D
npm i @babel/plugin-proposal-class-properties -D
npm i @babel/plugin-proposal-decorators -D
npm i @babel/runtime @babel/plugin-transform-runtime -D
注：
babel-loader 加载器
@babel/core babel 核心包， babel-loader 的核心依赖
babel/preset-env ES语法分析包
@babel/plugin-proposal-class-properties 用来解析类的属性的
@babel/plugin-proposal-decorators 装饰器
@babel/runtime @babel/plugin-transform-runtime babel 编译时只转化语法，几乎可以编译所有新的JavaScript语法，但并不会转化BOM（浏览器）里面不兼容的API。比如 Promise, Set, Symbol, Array, from, async 等等的一些API。这两个包就是来搞定这些API的。
webpack.config.js
module.exports = {
module: {
rules: [ //规则
{
test: /\.js$/,
use: {
loader: 'babel-loader', //用babel-loader把 es6 -> es5
options: {
presets: [
'@babel/preset-env' //根据你支持的环境自动决定适合你的babel插件
],
plugins: [ // plugin 是需要的插件
[ '@babel/plugin-proposal-decorators', { 'legacy': true } ],
[ '@babel/plugin-proposal-class-properties', { 'loose': true } ],
'@babel/plugin-transform-runtime'
]
},
},
include: path.resolve(__dirname,'src'), //指定处理文件，优化处理速度
exclude: /node_modules/ //不处理node_modules,优化处理速度
}
]
}
}
操作 ( vue )
终端
npm i vue -S
npm i vue-loader vue-template-compiler -D
webpack.config.js
const VueLoaderPlugin = require('vue-loader/lib/plugin')
module.exports = {
plugin: [
new VueLoaderPlugin() //VueLoaderPlugin 在 vue-loader v15的版本中，这个插件是必须启用的
],
module: {
rules: [ //规则
{ test: /\.vue$/, use: 'vue-loader' }
]
}
}
main.js 入口文件
//import Vue from 'vue' 默认加载阉割版的vue
import Vue from '../node_modules/vue/dist/vue.js'
import app from './App.vue'
let vm = new Vue({
el: '#app',
data: function () {
return {
msg: 'hello word'
}
},
render: c => c(app) //function (createElement) { createElement(app) }
})
App.vue
<template>
<div>
<h4>这是App组件</h4>
</div>
<template>
<script>
export default {
name: 'App',
data () {
return{}
},
methods: {
}
}
</script>
<style scoped>
</style>
终端
npm i vue-router -S
main.js 入口文件
import Vue from '../node_modules/vue/dist/vue.js' //导入vue完整包
import VueRouter from 'vue-router' //导入vue路由包
Vue.use(VueRouter) //安装vue路由
import app from './App.vue'
import router from './router.js' //导入自定义路由
let vm = new Vue({
el: '#app',
data() {
return {
msg: 'hello word'
}
},
render: c => c(app),
router
})
打包文件
1.基础用法（无需配置webpack.config.js文件）
操作
在终端输入：
webpack .\src\main.js -o .\dist\bundle.js --mode=development
注：
.\src\main.js 为被打包文件路径
.\dist\bundle.js 为打包后文件路径
–mode=development 为引入模式
或
在 package.json 文件中自定义指令简化输入
{
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"go": "webpack ./src/main.js -o ./dist/bundle.js --mode=development"
}
}
注：
在绝大多数地方，用的都是 /（slash），包括Mac/Linux，也包括URL表示路径分隔符；
只有Microsoft在自己的操作系统里面偏要用\（backslash），使得自己与众不同。
虽然现在在cmd中，已经不区分正斜杠和反斜杠了
但 \ 在大多数语言中是转义字符
所以在 package.json 文件中应该用 / 或者 \\ 用反斜杠将反斜杠转义
终端：
npm run go
等同于输入:
webpack .\src\main.js -o .\dist\bundle.js --mode=development
效果
文件目录
project_name
├── dist
│ └── `bundle.js` //dist文件下生成个bundle.js文件
index.html直接通过<script>标签引用此文件
2.配置文件打包
操作
- 创建配置文件
文件目录
project_name
├── dist
├── src
├── package.json
├── mode_modules
├── package-lock.json
├── `webpack.config.js` //创建 webpack.config.js 文件
- 配置文件
const path = require ( 'path' )
module.exports = {
mode: 'development', //模式，默认两种 production development
entry: './src/index.js', //入口
output: {
filename: 'bundle.js', //打包后文件名
path: path.resolve( __dirname, 'dist' ) //路径必须是一个绝对路径
}
}
- 命令行打包
webpack //自动寻找根目录下的配置文件进行打包
webpack-dev-server
在开发测试过程中，我们会经常修改代码后，需要手动打包，然后频繁刷新页面查看效果webpack-dev-server是webpack官方提供的一个小型Express服务器。使用它可以为webpack打包生成的资源文件提供web服务。
操作
终端
npm i webpack-dev-server -g 安装webpack-dev-server
webpack-dev-server 运行服务器
ctrl + c 停止运行服务器
将 index.html 的引用路径改为 <script src=‘http://localhost:8080/bundle.js’>
效果
- 在 http://localhost:8080/ 目录下会生成一个虚拟的 bundle.js 文件
- 当我们修改代码保存时，webpack-dev-server 会自动打包生成虚拟 bundle.js
webpack-dev-server 的参数和配置
webpack-dev-server --open --hot contentBase src 可以添加参数实现更多功能
或
在 webpack.config.js 中配置参数
module.exports = {
devServer: {
open: true, //输入命令后自动打开默认浏览器
hot: true, //重新加载组件改变部分（而不是重新加载整个页面）
inline: true, //刷新浏览器，如果添加了hot，在热加载失败后才会刷新浏览器
contentBase: 'src', //本地服务器所加载的页面所在的目录
host: '127.0.0.1', //设置端口号
compress: true //对所有的服务器资源采用gzip压缩
}
}
webpack-dev-server //设置congfig后会根据设置参数进行加载
虚拟HTML
操作
npm i html-webpack-plugin -D //安装html-webpack-plugin插件
修改 webpack.config.js 文件
const HtmlWebpackPlugin = require('html-webpack-plugin'); //引入插件
module.exports = {
plugins: [ //所有插件的配置节点
new HtmlWebpackPlugin({ //打包输出HTML
title: 'This is title', //生成html文件的标题
filename: 'index.html', //输出html的文件名称
template: './src/index.html', //模板文件
minify: { //压缩HTML文件
removeComment: true, //移除HTML中得注释
collapseWitespace: true, //删除空白字符与换行
minifyCSS: true //压缩内联CSS
}
})
]
}
webpack-dev-server 终端输入命令运行服务器
效果
内存中会生成虚拟得 index.html 文件，并引用虚拟得 bundle.js
所以我们这里可以将上面 index.html 引用的 虚拟 bundle.js 改回本地 的 bundle.js
图解
2931
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
