webpack4配置详细过程及采坑
- 新建项目文件夹 如mooc_learning
没有进到mooc_learning，进行安装时，会报错Failed to execute ‘/usr/local/bin/node /usr/local/lib/node_modules/npm/xxx’
- 新建src文件夹，并建立文件src->app.vue
{{text}}
- 新建src文件夹，并建立文件src->index.js
import Vue from 'vue';
import App from './app.vue';
const root = document.createElement('div');
document.body.appendChild(root);
new Vue({
render: (h) => h(App)
}).$mount(root);
- git init生成package.json
- 安装webpack vue vue-loader 。安装时要注意先在全局安装（-g）后，再进行-D安装。npm install -S -D -g区别
sudo npm i webpack vue vue-loader -g
sudo npm i webpack vue vue-loader -D
报错：
npm WARN [email protected] requires a peer of css-loader@* but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of vue-template-compiler@^2.0.0 but none is installed. You must install peer dependencies yourself.
解决方案：
sudo npm i css-loader vue-template-compiler -g
sudo npm i css-loader vue-template-compiler -D
如果安装vue-template-compiler成功后，依旧报错“[email protected] requires a peer of vue-template-compile”，
则需要检查一下，你的vue-loader是否安装成功了（我在这个地方卡了很久，明明package.json中已经可以看到ue-template-compiler已经安装成功，但报错就是不消失）
5. 建立webpack.config.js
// 使用绝对路径
const path = require('path');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
var HtmlWebpackPlugin = require('html-webpack-plugin'); //引入插件
module.exports = {
// webpack负责打包前端资源
entry:path.join(__dirname,'src/index.js'),
output:{
filename: 'bundle.js',
path:path.join(__dirname, 'dist'),
},
plugins: [
// make sure to include the plugin for the magic
new VueLoaderPlugin(),
new HtmlWebpackPlugin()
],
module:{
rules:[
{
test:/\.vue$/,
loader:'vue-loader',
},
{
test:/\.css$/,
use:['style-loader','css-loader'],
},
]
},
mode: 'production',
}
- 配置package.json，添加build命令
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack --config webpack.config.js"
},
注意，需要指定运行环境，此处暂且定为mode: ‘production’,
mode: 'production',
- 运行npm run build，此时报错：
vue-loader was used without the corresponding plugin. Make sure to include VueLoaderPlugin in your webpack config.
解决方法：
const VueLoaderPlugin = require('vue-loader/lib/plugin');
var HtmlWebpackPlugin = require('html-webpack-plugin'); //引入插件
plugins: [
// make sure to include the plugin for the magic
new VueLoaderPlugin(),
new HtmlWebpackPlugin()
],
再次运行npm run build，报错：Module parse failed: Unexpected character ‘#’ (13:0).You may need an appropriate loader to handle this file type.
原因是未安装style-loader css-loader，解决方案是：
sudo npm i style-loader css-loader
并在webpack.config.js-->rules中添加对css文件的处理loader
module:{
rules:[
{
test:/\.vue$/,
loader:'vue-loader',
},
{
test:/\.css$/,
use:['style-loader','css-loader'],
},
]
},
- 接下来就可以run build了，运行成功后，生成dist文件夹
- 完整代码：https://github.com/MingleJia/local-update-vue-todo