本文分上、中、下三个部分(先写上篇)
- webpack历险记之一个简单的vue hellowrld (上)
- vue项目搭建之vue全家桶和element ui、规范、单元测试等等。。。(中)
- vue项目优化之打包优化，页面加载优化等等。。。(下)
代码示例地址github.com/zwfun/zw-vu…
以下所有的知识都是从下面的参考文档学来的，如果看过好几遍的同学我这篇文章就不用看了，如果没看过的先去看几遍，看过了实在还是不会的同学再来看我这篇文章
本文不写具体的操作步骤, 只写这个过程中需要什么，具体怎么做 以参考文档的形式给出 网上很多文章一上来就介绍安装各种包，看完一遍之后还是一知半解，无从下手。 自己写一个文章，按自己需要的功能加载各种包。
我要做什么
第一次配置webpack, 就从构建一个vue的helloworld项目开始。 我需要让webpack帮我打包vue项目
1、需要webapck做什么
这时候是不是脑袋一片空白， 不知道从什么地方开始。 万事开头难，先从我需要webpack帮我做什么开始
- 首先当然是帮我打包vue文件
- 我们项目中会用到css,scss,js,img,字体文件，webpack是不是也能帮我们加载css并打包
- 我会使用es6语法，考虑到兼容性问题， webpack能不能帮我转成es5
- 开发时我需要在写代码的时候实时展示我的内容，需要热更新
- 构建整个项目
ps： 也就做5件事不多嘛
2、怎么做
开始前先看看webpack官方中文文档-指南文档的概念和指南，也许webpack官方文档-配置部分你也应该看下
看完之后应该对webpack有一定的了解了， 那咱们继续
-
webpack安装和入口和出口配置 这些直接忽略，不会的话看官方文档的起步章节
-
webpack帮我们打包vue文件
-
打包vue文件需要使用到vue-loader(Vue Loader 是一个 webpack 的 loader，它允许你以一种名为单文件组件 的格式撰写 Vue 组件)
-
安装vue-loader 参考官方文档-手动设置
npm install -D vue-loader vue-template-compiler
-
vue-loader webpack配置 参考官方文档-手动设置
// webpack.base.config.js const VueLoaderPlugin = require('vue-loader/lib/plugin')module.exports = { module: { rules: [ // ... 其它规则 { test: /\.vue$/, loader: 'vue-loader' } ] }, plugins: [ // 请确保引入这个插件！ new VueLoaderPlugin() ] }
-
webpack帮我们打包css文件
- 参考webpack官方文档-指南-加载css
- 参考vue-loader官方文档-使用预处理器
- 因为我会用到scss，以及在vue组件中使用css/scss，所以我需要使用一下三个loader帮我加载css。
- 'vue-style-loader',
- 'css-loader',
- 'sass-loader'
- 在正式环境下我需要webpack帮我把css提取出来，所以在正式环境中会使用MiniCssExtractPlugin.loader帮我提取css到单独的文件中
// 正式环境配置 rules: [ { test: /\.scss$/, use: [ { loader: MiniCssExtractPlugin.loader, options: { publicPath: 'css/' } }, 'css-loader', 'sass-loader', ] }, { test: /\.css$/, use: [ { loader: MiniCssExtractPlugin.loader, options: { publicPath: 'css/' } }, 'css-loader' ] }, ]// 开发环境配置 rules: [ { test: /\.scss$/, use: [ 'vue-style-loader', 'css-loader', 'sass-loader' ] }, { test: /\.css$/, use: [ 'vue-style-loader', 'css-loader' ] } ] -
使用babel7帮我将es6转为es5
- babel官方文档
- babel在线试用
- babel选择环境配置
- 使用配置文件的方式配置babel7. 新建一个.babelrc,@babel/env这个preset包括支持现代 JavaScript（ES2015，ES2016 等）的所有插件， @babel/plugin-transform-runtime帮我们动态转义内置函数(像 Array.from 或 Object.assign 这样的静态方法，像Array.prototype.includes 这样的实例方法)， 配置如下
{ "presets": [[ "@babel/env", { "useBuiltIns": "entry" } ]], "plugins": ["@babel/plugin-transform-runtime"] } -
加载字体和图片等
-
字体和图片是使用file-loader加载。配置file-loader后我们能使用像import img from './file.png'这样的方式加载文件
rules: [ { test: /\.(png|svg|jpg|gif)$/, use: [ 'file-loader' ] }, { test: /\.(woff|woff2|eot|ttf|otf)$/, use: [ 'file-loader' ] } ]
-
热更新
- 参考使用 webpack-dev-server
- 开发环境，使用webpack-dev-server本地服务器实现热加载，
- webpack中配置，浏览器中输入0.0.0.0:8888即可打开项目。
devServer: { host: '0.0.0.0', historyApiFallback: true, port: 8888 },
-
构建整个项目
- 参考webpack官方文档-指南-管理输出
- 参考设置-htmlwebpackplugin
- 参考清理 /dist 文件夹
- npm run build帮我们构建，那我们还需要点什么呢？
- 每次打包时帮我们清空dist文件。使用(CleanWebpackPlugin)
- 使用html模板自动将打包生成的js和css文件注入到html模板中,使用(HtmlWebpackPlugin)
const CleanWebpackPlugin = require('clean-webpack-plugin'); const HtmlWebpackPlugin = require('html-webpack-plugin'); plugins: [ new CleanWebpackPlugin(), new HtmlWebpackPlugin({ title: 'zw-vue-cli', template: path.resolve(__dirname, '../', 'index.html') }) ]
well done
一个基础的vue webpack配置就这样完成了
