1.初始化项目目录
npm init (项目名称必定要规范 不然会保存 不能使用中文或者特殊符号)
安装 npm i webpack vue vue-loader
根据提示信息安装依赖 npm i css-loader vue-template-compiler
2.新建文件夹(源目录)src在里面建立app.vue文件
3.建立webpack.config.js
在package.json配置"bulid":"webpack --config webpack.config.js"
//直接在命令行输入会使用去全局的webpack
npm run bulid 根据提示安装npm install webpack-cli -D --save
4.npm i cross-env(不一样平台的命令不一样)
在package.json 配置
"bulid": "cross-env NODE_ENV=production webpack --config webpack.config.js",
"dev": "cross-env NODE_ENV=development webpack-dev-server --config webpack.config.js"
5.npm i postcss-loader autoprefixer babel-loader babel-core
新建postcss.config.js(加浏览器前缀)
const autoprefixer = require('autoprefixer')
module.exports = {
plugins:[
autoprefixer()
]
}
新建.babelrc
{
"presets":[
"env"
],
"plugins":[
"transform-vue-jsx"(专门转化vue里面的jsx代码)
]
}
npm i babel-preset-env babel-plugin-transform-vue-jsx
根据warn提醒安装npm install babel-helper-vue-jsx-merge-props babel-plugin-syntax-jsx
6.正式环境中使用chunkhash
npm install extract-text-webpack-plugin@next不然会报错 css