const path = require('path') const config = { entry: path.resolve(__dirname, '../src/index.js'), output: { path: path.resolve(__dirname, 'dist'), filename: 'index.js' }, module: { rules: [{ test: /\.vue$/, loader: 'vue-loader' }] } }
module.exports = config
webpack.config.build.js const { VueLoaderPlugin } = require('vue-loader') const HtmlWebpackPlugin = require('html-webpack-plugin') const merge = require('webpack-merge') const baseConfig = require('./webpack.config.base') const config = merge(baseConfig ,{ plugins: [ new VueLoaderPlugin(), new HtmlWebpackPlugin() ] })
module.exports = config
这里配置开发环境就是重头戏了,我们使用webpack-dev-server
webpack-dev-server是一个小型的Node.js Express服务器,代码都跑在内存里面
安装webpack-dev-server
npm install webpack-dev-server -D webpack.config.dev.js const webpack = require('webpack') const merge = require('webpack-merge') const baseConfig = require('./webpack.config.base') const { VueLoaderPlugin } = require('vue-loader') const HtmlWebpackPlugin = require('html-webpack-plugin') const config = merge(baseConfig, { devServer: { port: '8000', host: 'localhost', hot: true, //热加载 //quiet: true //控制台中不输出打包的信息 }, plugins: [ new VueLoaderPlugin(), new HtmlWebpackPlugin(), new webpack.HotModuleReplacementPlugin() ] }) module.exports = config
最后在package里面添加脚本
"build": "webpack --mode=production --config build/webpack.config.build.js",
"dev": "webpack-dev-server --mode=development --progress --config build/webpack.config.dev.js"
执行npm run dev查看控制台
这就成功了,在浏览器里面输入:8000/,修改app.vue文件,实现了vue-cli的热加载了~~~~
接下来完善一下,不能只有.vue文件的loader,其他的webpack也要认识
我们配置一下图片的loader,以及css的loader,同时css使用postcss进行预处理
url-loader 用于将文件转换为base64 URI file-loader是依赖loader
npm i url-loader file-loader -D
添加配置webpack.config.base.js>module>rules
{ test: /\.(gif|png|jpg|svg)$/, use: [{ loader: 'url-loader', options: { limit: 2048, name: 'resources/[path][name].[hash:8].[ext]' } }] },
配置css(vue-cli里面的实现非常友好,有机会可以去看看) 下面的是最简单的配置
npm install css-loader -D npm install style-loader -D npm install postcss-loader -D
添加配置webpack.config.base.js>module>rules (postcss不了解谷歌一下)
{ test: /\.css$/, use: [ 'css-loader', 'style-loader', { loader: 'postcss-loader', options: { sourceMap: true //启用源映射支持，postcss-loader将使用其他加载器给出的先前源映射并相应地更新它 } } ] } npm install autoprefixer -D
根目录新建文件postcss.config.js,安装autoprefixer (自动添加浏览器前缀)
const autoprofixer = require('autoprefixer') module.exports = { plugins: [ autoprofixer() ] }
配置到这里基本的图片以及css就配置完成了,运行一下试试 npm run dev
我找src下面创建了assets/img/user.jpg
app.vue
<template> <div> 你好 {{ data }} <img src="https://www.jb51.net/article/assets/img/user.jpg"> </div> </template> <script> export default { data(){ return { data: "Vue Cli" } } } </script> <style> div{ font-size: 20px; color: red; } img { width: 100px; } </style>
实现了开发环境的图片以及css的配置
打包一下试试
build后生成的目录是这样的
这不是我们想要的,webpack把代码,类库,css都打包在一起,这样不管是上线还是首屏加载都有影响,所以这里我们要优化webpack
在处理之前想安装一个可以帮助我们每次build之前自动删除上次build生成的文件的插件
clean-webpack-plugin这个插件不知道为什么,怎么配置路径都没效果
这里我使用rimraf来进行删除(vue-cli也是使用rimraf,但是他是写在代码里面)
npm install rimraf -D
在package里面变一下脚本,让打包之前帮我们删除之前到打包文件
"build-webpack": "webpack --mode=production --config build/webpack.config.build.js",
"delete": "rimraf dist",
"build": "npm run delete && npm run build-webpack"
分离打包css
它会将所有的入口 chunk(entry chunks)中引用的 *.css，移动到独立分离的 CSS 文件
npm install extract-text-webpack-plugin@next -D
因为开发环境和生产环境不一样
我们需要将css部分的代码分环境配置
1.将原先的css配置放到webpack.config.dev.js里面
2.在webpack.config.build.js里面重写