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