阅读 2768

从零开始搭建webpack应用

最近研究webpack配置神烦,打包工具指不定哪天又要被取代。要想自己手动搭一个复杂应用的webpack脚手架不是一件容易的事, 看看vue-cli的webpack配置文件就有8+个,使用的插件有14+个,代码800行+。还没开始写代码就要搞懂这么多“规则”,还不如多花点时间研究js核心,哪天可以自己倒腾工具。为了重复踩坑,还是记录下来适应这些规则的过程,通常工具文档通常不会涵盖这些内容。不做工具构建工程师,但要利用工具。

一、环境准备(作者是windows环境)

1.1. 安装node

安装node,前往官网,node自带npm。安装完成打开cmd输入下面的指令检查是否安装成功:

node -v
npm -v
复制代码

error1node 指令没反应

解决:删除npm目录中的npmrc文件。

1.2. 初始化项目

运行npm init 根据提示初始化一个项目,生成package.json文件

注意:项目根目录的文件夹名称不能使用空格,否则项目会报错。

error1npm 指令没反应

解决:删除npm目录中的npmrc文件。

error2 : 全局安装报错:没有权限 ,或者npm指令没反应

解决: 注意把nodePATH改在有权限的地方,否则后续使用命令行全局安装包可能会有权限问题。

  • 检查环境变量PATH和NODE_PATH
  • 查看全局安装默认路径: npm config get prefix
  • 在node安装路径下新增 node_globalnode_cache2个文件夹
  • 修改全局安装默认路径:

npm config set prefix 'C:\Users\Administrator\node\node_global' npm config set cache 'C:\Users\Administrator\node\node_cache'

  • 再次查看全局安装默认路径
  • 修改环境变量
    • 用户变量- NODE PATHPATH中添加: C:\Users\Administrator\node\node_global
    • 系统变量- PATH中添加: C:\Users\Administrator\node\node_global
  • 重启cmd, path才会生效

error3 :unexpected token { }in json at position 403

解决:删除pakage.json.lock文件。

二、包的管理

2.1. 安装yarn

建议安装yarn利于版本控制,安装 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;
  • 不要用night 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. 安装指令

仅在开发环境使用的包:--save-dev npm install --save-dev 包名

生产环境也要使用的包: --save npm install --save 包名

4.3. 编译ES6或以上,使用babel

  • cnpm install --save-dev babel-cli babel-preset-env
  • cnpm install --save-dev babel-loader
  • npm install --save-dev babel-polyfill

要安装babel-polyfill的原因,官网解释:Babel仅仅编译了ES6的语法例如箭头函数,使用babel-polyfill可以编译一些全局变量如Promise以及一些原生新特性如String.padStar。 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')
复制代码