实际在node环境中运行 const path = require('path')
webpack 4.0+版本(webpack 与 cli 分离)
1.起步
1-1 安装
我们安装的时候把webpack安装到开发依赖(–save-dev)中，因为 webpack 只是一个打包工具，项目上线不需要，上线的是打包结果，而不是工具，所以为了区分核心包依赖和开发工具依赖，这里通过 --save 和 --save-dev 来区分
全局安装
npm install --global webpack
npm install --global webpack-cli
1
2
本地安装（推荐）
npm install --save-dev webpack
npm install --save-dev webpack-cli
//–save-dev 简写 -D
npm i -D xxx
1
2
3
4
1-2 打包
webpack 模块入口文件路径 模块出口文件路径
1
1-3 划分目录
源码存储在 src 目录
打包后存放在 dist 目录
1-4 打包配置文件 (在node环境运行)
// 实际在node环境中运行
const path = require(‘path’)
module.exports = {
entry: ‘./src/main.js’, //入口文件模块路径
output:{
path:path.join(__dirname,’./dist’),//__dirname node内置变量
filename:‘bundle.js’//打包后的文件名
}
}
1
2
3
4
5
6
7
8
9
10
1-5 安装到项目中的需要配置 Npm scripts (package.json 的 scripts)
“build”:“webpack”
npm run a
##Strat比特殊
npm start
“name”: “webpack”,
“version”: “1.0.0”,
“description”: “My webpack project”,
“main”: “index.js”,
“dependencies”: {
“webpack-cli”: “^3.3.5”,
“webpack”: “^4.35.0”
},
“devDependencies”: {},
“scripts”: {
// “a”:“a.js”
},
“keywords”: [],
“author”: “”,
“license”: “ISC”
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
1-6 ES6规范
导入 import (require)
导出 export (module.exports)
2.HtmlWebpackplugin
解决资源打包 根目录下的index.html无法访问资源的问题
解决打包文件改了 index 的引入文件也要进行修改
实际上还是把你的index.html打包到 dist (和bundle放一块) 自动引用 scripts
安装
npm i -D html-webpack-plugin
1
配置
plugins: [
new HtmlWebpackPlugin({ template:'./index.html' 1 })
]
1
2
3
4
5
6
7
8
3.Develoment
3-1 hot-module-replacement 热更新
配置
webpack.config.js
const webpack = require(‘webpack’);
devServer: {contentBase: './', 12
hot: true 1
}
plugins: [
new HtmlWebpackPlugin({
template:’./index.html’
}),
new VueLoaderPlugin(),
new webpack.HotModuleReplacementPlugin()
]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
package.json 如果是安装 webpack-cli
“dev”: “webpack-dev-server --hotOnly”
1
3-2 webpack-dev-server
解决每次打包都麻烦，而且即使有-save也不方便，还需要自己手动刷新浏览器。webpack-dev-server这个工具可以实现监视代码改变，自动打包，打包完毕自动刷新浏览器的功能
安装
npm i -D webpack-dev-server
1
配置
//webpack.config.js
mode: ‘development’,
entry: ‘./src/main.js’, //入口文件模块路径
//这里模拟dist目录。缓存在内存中不会显示 一般为 ./devServer: {
contentBase: './dist' 1 }
1
2
3
4
5
6
7
8
//package.json
“test”: “echo “Error: no test specified” && exit 1”,
“build”: “webpack”,
“watch”: “webpack --watch”,“start”: “webpack-dev-server --hotOnly” //这里是start 所以使用npm start 否则 npm run xxx 建议dev
1
2
3
4
5
3-2-1 启动开发模式
npm start//取决于"start": “webpack-dev-server --open”
1
4. 对于Es6语法处理 babel(默认只转换语法)
babel安装
npm install -D babel-loader @babel/core @babel/preset-env
1
配置
module: {
rules: [
{ test: /.m?js$/, exclude: /(node_modules|bower_components)/, use: { loader: 'babel-loader', options: { presets: ['@babel/preset-env'] } } } 12345678910
]
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
4-1 Polyfill(转换API)
安装
npm install -D @babel/polyfill
1
配置
//原来
//entry: ‘./src/app.js’, //入口文件模块路径
module.exports = {
entry: ["@babel/polyfill", “./src/main.js”]
}
1
2
3
4
5
6
4-2 配置transform-runtime 来解决代码重复
在打包过程中，babel 会给某些包提供一些工具函数，而这些工具函数可能会重复出现在多个模块。这样会导致打包体积过大，所以babel提供了一个babel-transform-runtime来解决这个打包体积过大的问题。
安装
npm install -D @babel/plugin-transform-runtime
npm install --save @babel/runtime
1
2
配置（cacheDirectory 解决webpack打包慢的问题）
rules: [
// the ‘transform-runtime’ plugin tells Babel to
// require the runtime instead of inlining it.
{
test: /.m?js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: ‘babel-loader’,
options: {
cacheDirectory:true,
presets: [’@babel/preset-env’],
//配置此行
https://www.ximalaya.com/yinyue/25371165/
https://www.ximalaya.com/yinyue/25371160/
https://www.ximalaya.com/yinyue/25371154/
https://www.ximalaya.com/yinyue/25371139/
https://www.ximalaya.com/yinyue/25371144/
https://www.ximalaya.com/yinyue/25371134/
https://www.ximalaya.com/yinyue/25371129/
https://www.ximalaya.com/yinyue/25371103/
https://www.ximalaya.com/yinyue/25371093/
https://www.ximalaya.com/yinyue/25371073/
https://www.ximalaya.com/yinyue/25371080/
https://www.ximalaya.com/yinyue/25371065/
https://www.ximalaya.com/yinyue/25371060/
https://www.ximalaya.com/yinyue/25371052/
https://www.ximalaya.com/yinyue/25371048/
https://www.ximalaya.com/yinyue/25371038/
https://www.ximalaya.com/yinyue/25371024/
https://www.ximalaya.com/yinyue/25370987/
https://www.ximalaya.com/yinyue/25370978/
https://www.ximalaya.com/yinyue/25370970/
https://www.ximalaya.com/yinyue/25370965/
https://www.ximalaya.com/youshengshu/25246065/
https://www.ximalaya.com/youshengshu/25246058/
https://www.ximalaya.com/youshengshu/25246053/
https://www.ximalaya.com/youshengshu/25246050/
plugins: [’@babel/plugin-transform-runtime’]
}
}
}
]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
5.Loader
5-1.loading css
安转
npm i -D style-loader css-loader
1
引入
//举例
import ‘./app.css’
1
2
配置webpack
顺序 不可逆
style-loader => css-loader
module:{
rules: [
{
test: /.css$/,
use: [
// style-loader
//{ loader: ‘style-loader’ },
// css-loader
// {
//loader: ‘css-loader’,
//此处是一个坑 设置modules可能会导致打包组件css选择器乱码 导致无法使用
// options: {
// modules: true
// }
//}
use: [‘style-loader’, ‘css-loader’]
]
}
]
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
2.Loading image
安装
npm i -D file-loader
1
配置
module: {
rules: [{
test: /.cssKaTeX parse error: Expected 'EOF', got '}' at position 182: …} } ] }̲, { test: /…/,
use: [
‘file-loader’
]
}]
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
3.loading less
安装
npm i -D style-loader css-loader less-loader less
1
配置
{
test: /.less$/,
use: [
‘style-loader’,
‘css-loader’,
‘less-loader’
]
}
1
2
3
4
5
6
7
8
4.loading Vue
安装
npm install -D vue-loader vue-template-compiler
1
配置
// webpack.config.js
const VueLoaderPlugin = require(‘vue-loader/lib/plugin’)
module.exports = {
module: {
rules: [
// … 其它规则
{
test: /.vue$/,
loader: ‘vue-loader’
}
]
},
plugins: [
// 请确保引入这个插件！
new VueLoaderPlugin()
]
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
加载使用第三方包的问题
例如：
import $ from ‘jquery’
1
这样打包也会同时打包 jquery 到 bundle.js
解决办法： (key为包名 value为接口 )
module.exports = {
//…
externals: {
jquery: ‘jQuery’,
vue:‘Vue’,
‘vue-router’:‘VueRouter’
}
}
1
2
3
4
5
6
7
8
6.模块环境中使用vue-router
安装
npm i vue-router
1
引用资源
1
配置externals
module.exports = {
//…
externals: {
vue:‘Vue’,
‘vue-router’:‘VueRouter’
}
}
1
2
3
4
5
6
7
在 router.js加载使用
import VueRouter from ‘vue-router’
import Foo from ‘./components/Foo.vue’
import Bar from ‘./components/Bar.vue’
export default new VueRouter({
routes:[
{
path:’/foo’,
component:Foo
},
{
path:’/bar’,
component:Bar
}
]
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
在 main.js文件中配置使用路由对象
import Vue from ‘vue’
import App from ‘./App.vue’
import router from ‘./router’
new Vue({
components:{App},
router,
template:’’
}).$mount(’#app’)
1
2
3
4
5
6
7
8
9
在 App.vue中设置路由出口
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
SP：附加
只安装 package 里面 dependencies 依赖内容
npm i --production
1
–save和 --save-dev的区别
我们把开发工具相关的依赖信息保存到devDependencies选项中。把核心依赖（例如 vue ）的依赖信息保存到 dependencies选项中。
这样做的话，就是把开发依赖和核心依赖分开了，因为开发依赖在打包结束之后上线的话就不需要。
最后项目上线，我们真正需要安装发布得的是 dependencies依赖中的包也就是 npm i --production
作者：是吗乔治
来源：CSDN
原文：https://blog.csdn.net/qq_34361235/article/details/94736584
版权声明：本文为博主原创文章，转载请附上博文链接！
相关知识
windows环境下electron开发遇到的各种坑汇总
实现网站长截图
5. 工厂光源(环境贴图和环境光)
手刃前端监控系统
《React后台管理系统实战：十五》项目部署：跨域和非跨域部署，nginx的配置
加快编译速度（一）
配置webpack具体步骤及其完整配置
Python 文件操作中的读写模式:open(path, ‘
鲜花网项目实战（一）
vue报错总结
网址: 实际在node环境中运行 const path = require('path') https://m.huajiangbk.com/newsview1125708.html
| 上一篇: Mac系统下的Pycharm怎么 |
下一篇: IIS下配置php运行环境。 |
