最近研究 webpack 配置神烦, 打包工具指不定哪天又要被取代要想自己手动搭一个复杂应用的 webpack 脚手架不是一件容易的事, 看看 vue-cli 的 webpack 配置文件就有 8 + 个, 使用的插件有 14 + 个, 代码 800 行 + 还没开始写代码就要搞懂这么多规则, 还不如多花点时间研究 js 核心, 哪天可以自己倒腾工具为了重复踩坑, 还是记录下来适应这些规则的过程, 通常工具文档通常不会涵盖这些内容不做工具构建工程师, 但要利用工具
一环境准备
1.1. 安装 node
安装 node, 前往官网, node 自带 npm 安装完成检查是否安装成功:
node -v npm -v
1.2. 初始化项目
运行 npm init 根据提示初始化一个项目, 生成 package.json 文件
注意: 项目根目录的文件夹名称不能使用空格, 否则项目会报错
error1 : npm 指令没反应
解决 : 删除 npm 目录中的 npmrc 文件
error2 : 全局安装报错: 没有权限
解决 : 注意把 nodePATH 改在有权限的地方, 否则后续使用命令行全局安装包可能会有权限问题
查看全局安装默认路径:
npm config get prefix
修改全局安装默认路径:
- npm config set prefix
- 'C:UsersAdministratornodenode_global' (文件夹自己建好, 确保路径有权限)
- npm config set cache
- 'C:UsersAdministratornodenode_global' (文件夹自己建好, 确保路径有权限)
再次查看全局安装默认路径
修改环境变量
用户变量 - NODE PATH 和 PATH 中添加: C:UsersAdministratornodenode_global
系统变量 - PATH 中添加: C:UsersAdministratornodenode_global
重启 cmd, path 才会生效
error3 :unexpected token { }in json at position 403
解决 : 删除 pakage.json.lock 文件
二包的管理
2.1. 安装 yarn
建议安装 yarn !npm 有坑, 不利于版本控制, 安装 yarn 官方文档安装使用指令:
- yarn init // 初始化项目, 生成 yarn.lock 文件
- yarn add [pakeage] --dev // --dev 只在开发环境下使用的插件
- yarn (install) // 安装 lock 文件中所有的依赖
error1 : 安装了 yarn , 运行 yarn install 报错无法使用!
解决 : 把 yarn 安装文件夹下的 bin 文件夹加到环境变量
2.2. 安装 cnpm ,npm 国内镜像 (可选)
npm install -g cnpm --registry=https://registry.npm.taobao.org
三脚手架搭建
3.1 vue-cli 脚手架迅速搭建
全局安装:
- npm install -g vue-cli
- ;
查看是否安装成功: vue -V ;
初始化项目:
- vue init webpack my-project
- ;
不要用 nigt watch , 里面的 demo 依赖 google 的资源, 国内无法使用, 启动项目会报错, 官网说明: The test below navigates to google.com and searches for "rembrandt van rijn", then verifies if the term first result is the Wikipedia page of Rembrandt
3.2 不使用 vue-cli 简易搭建 webpack 项目可参考
webpack 官网 5 秒搭建一个 webpack 项目
安装 webpack,
npm install --save-dev webpack
配置 webpack.config.js 文件
- const path = require('path');
- module.exports = {
- entry: './src/app.js',(主文件自己定义)
- output: {
- path: path.resolve(__dirname, 'bin'),
- filename: 'app.bundle.js'
- }
- };
配置本地服务 安装客户端服务器
npm install webpack-dev-server
; 项目启动
- webpack-dev-server --content-base build/
- ;
四安装各种需要的包
4.1. 常用包传送门
4.2. 安装指令
仅在开发环境使用的包:
npm install --save-dev babel-loader
生产环境也要使用的包:
npm install --save jquery babel-polyfill
4.3. 编译 ES6 或以上, 使用 babel(react 也支持)
- cnpm install --save-dev babel-cli babel-preset-env
- cnpm install --save-dev babel-loader
- npm install --save-dev babel-polyfill
- Since Babel only transforms syntax (like arrow functions), you can use babel-polyfill in order to support new globals such as Promise or new native methods like String.padStart (left-pad). It uses core-js and regenerator. Check out our babel-polyfill docs for more info.
4.4. creat a .babelrc 文件 (若已经生成, 则无需创建)
- {
- "presets": ["env"]
- }
五一些有用的配置
5.1 接口转发 proxytable
在开发环境中, 通过设置地址映射将复杂的 url 简化, 还可以解决跨域问题
- // config/index.js
- proxyTable: {
- '/api': { // 将请求路径中包含 api 全部转发到下面配置的 target 路径中
- target: 'http://127.0.0.1:3000', // 你接口的域名或 ip
- // secure: false, // 如果是 https 接口, 需要配置这个参数
- changeOrigin: true, // 如果接口跨域, 需要进行这个参数配置
- pathRewrite: {
- '^/api': ''
- }
- }},
5.2 生产环境 URL 配置化 (开发环境线上)####
- let devUrl = 'api/asset/'; // 与上面 proxytable 中配置的 api 路径匹配
- let proUrl = 'https://node.xxxx.com/asset/';
- (curEnv == "production") ? (baseUrl = proUrl) :( baseUrl = devUrl);
5.3. 模块按需加载
使用 vue-cli 构建的项目, 在 默认情况下 , 执行 npm run build 会将所有的 js 代码打包为一个整体, 打包位置是 dist/static/js/app.[contenthash].js , 这个文件是非常大, 可能好几兆, 加载很慢
在路由文件中引入模块时分模块打包, 把我们想要组合在一起的组件打包到一个 chunk 块 中去, 使用 webpack 的 require.ensure , 并且在最后加入一个 chunk 名, 相同 chunk 名字的模块将会打包到一起
- router/index.js
- const lotteryIndex = r => require.ensure([], () => r(require('@/pages/lottery/lottery-index.vue')), 'chunk1')
- const drawList = r => require.ensure([], () => r(require('@/pages/lottery/draw-list.vue')), 'chunk2')
- const drawDetail = r => require.ensure([], () => r(require('@/pages/lottery/draw-detail.vue')), 'chunk3')
来源: https://www.thinksaas.cn/group/topic/839150/