1、项目文件目录下 npm init -y 创建package.json文件##
2、创建文件+目录##
根目录下创建index.html、webpack.config.js 、src目录、并在src目录下创建App.vue、 main.js文件
index.html就是html:5生成的，div上有id="app"，这个id是main.js上用于绑定的
main.js的代码如下
import Vue from 'vue'
import App from './App.vue'
new Vue({
render: h => h(App),
}).$mount('#app')
3、安装依赖（loader、plugin、依赖）##
1)webpack相关
webpack webpack-cli webpack-dev-server(是配置devServer用的)
2)vue
3)安装浏览器识别.vue文件的loader
vue-loader 和 vue-template-compiler
vue-loader 15版本以上必须增加插件部分
let VueLoaderPlugin = require('vue-loader/lib/plugin')
new VueLoaderPlugin(),
4)处理css的loader
//处理.scss、.less、.css文件
vue-style-loader和style-loader二选一
二者区别：vue-style-loader是在style-loader上改的，都会创建了一个 style 标签，然后直接插入到了 head 标签中，但是 vue-style-loader 除了插入 style 外，还做了一些服务端渲染的支持，所以如果你的 vue 项目是需要支持服务端渲染的时候，就需要用到 vue-style-loader。
vue-loader里依赖了vue-style-loader，所以vue-style-loader不安装可以使用
css-loader
postcss-loader（浏览器增加前缀）
sass-loader（依赖node-sass）
less-loader （依赖less）
stylus-loader
5)处理图片的loader
url-loader、file-loaderurl-loader就是基于file-loader的，小图是url，大图是file-loader
html-withimg-loader（针对于.html中的img引入的静态路径，不支持.vue文件）
6)css默认增加前缀的loader postcss-scss
根目录增加文件postcss.config.js
module.exports = {
parser: 'postcss-scss',
"plugins": [
require('autoprefixer')
]
};
7)处理es6兼容babel-loader
{
test: /.m?js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
options: {
presets: ['@babel/preset-env']
}
}
},
根目录创建.babelrc
{
"presets": ["@babel/preset-env", "@babel/preset-react", "mobx"],
"plugins": [
"@babel/plugin-proposal-object-rest-spread",
"@babel/plugin-transform-runtime"
]
}
8)html插件html-webpack-plugin
const HtmlWebpackPlugin = require('html-webpack-plugin')
new HtmlWebpackPlugin({
template:'./index.html',
minify:false
})
9)clean-webpack-plugin(再次打包时删除之前打包内容)
const {CleanWebpackPlugin} = require('clean-webpack-plugin')
new CleanWebpackPlugin(),
10)从js中提取css插件
webpack4x不支持extract-text-webpack-plugin
所以使用mini-css-extract-plugin'
style-loader用MiniCssExtractPlugin.loader替换
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
new MiniCssExtractPlugin({
filename: 'css/h.css',
})
还可以增加性能优化的配置
4、配置webpack.config.js##
除了上面的配置内容外
resolve: {
extensions: [".js", ".vue", ".json"],
alias: {
'@': path.resolve(__dirname, '../src'),
vue$: "vue/dist/vue.esm.js",
assets: path.resolve(__dirname, "../src/assets"),
img: path.resolve(__dirname, "../src/assets/img"),
components: path.resolve(__dirname, "../src/components"),
pcService: path.resolve(__dirname, "../src/view/management/service"),
utils: path.resolve(__dirname, "../src/utils"),
enum: path.resolve(__dirname, "../src/enum")
}
},
devServer:{
//运行代码的目录
contentBase:resolve(__dirname,"../dist"),
//端口号
port:3000,
open:true,
hot:true,
}
5、package.json中历史配置##
// "scripts": {
// "build": "webpack",
// "start": "webpack-dev-server"
// },
// "scripts": {
// "dev":"webpack-dev-server --config ./webpack.dev.js", //不生成dist文件夹
// "build":"webpack --config ./webpack.prod.js" //生成dist文件夹
// },
6、合并公用文件##
base是dev和prod环境提取的共同部分，dev和prod分别通过webpack-merge进行合并
//记得更改文件路径
"scripts": {
"dev": "webpack-dev-server --config ./build/webpack.dev.js",
"build": "webpack --config ./build/webpack.prod.js"
},
