在vue項目中配置webpack的入門級配置項(至於node那些安裝不說了)css
輸入初始化命令,生成package.josn文件html
npm init
生成初始化的modulevue
npm install
在vue項目中建立一個webpack.config.js文件,在這裏配置webpack的一些配置,如entry
,output
,module>rules
等等node
const path = require('path') const VueLoaderPlugin = require('vue-loader/lib/plugin') module.exports = { entry: path.join(__dirname, 'src/main.js'), output: { filename: 'bundle.js', path: path.join(__dirname, 'dist') }, module: { rules: [ { test: /\.vue$/, loader: 'vue-loader' }, { test: /\.css$/, loader: [ 'style-loader', 'css-loader' ] }, { test: /\.scss$/, loader: [ 'style-loader', 'css-loader', 'sass-loader' ] }, { test: /\.(gif|jpg|jpeg|png|svg)$/, use: [ { loader: 'url-loader', options: { limit: 1024, name: '[name].[ext]' } } ] } ] }, plugins: [ new VueLoaderPlugin() ] };
Tips 注意使用vue-loader的時候,須要引入VueLoaderPlugin
插件,不然報錯
rules裏面配置的就是解析各類文件的loader配置,要解析什麼文件,就給配置對應的name-loader配置
plugins裏面就是配置插件用的react
使用webpack-dev-server
來配置開發環境運行webpack
npm install webpack-dev-server
Tips:
正常在package.json文件裏面生成環境打包,是經過webpack --config webpack.config.js
而在開發環境下,須要經過webpack-dev-server來本地運行,webpack-dev-server --config webpack.config.js
在package.json中配置以下:web
"scripts": { "test": "echo \"Error: no test specified\" && exit 1", "build": "webpack --config webpack.config.js", "dev": "webpack-dev-server --config webpack.config.js" }
既然運行不一樣的環境,天然就須要配置環境變量來判斷當前的運行環境,cross-env
npm
npm install cross-env
安裝這個環境切換變量,主要是解決mac和window的運行解析,由於window須要加一個set才能弄,而mac能夠直接運行上面的scriptsjson
"scripts": { "test": "echo \"Error: no test specified\" && exit 1", "build": "cross-env NODE_ENV=production webpack --config webpack.config.js", "dev": "cross-env NODE_ENV=development webpack-dev-server --config webpack.config.js" }
獲取當前環境變量:數組
process.env.NODE_ENV
判斷當前環境變量:
const isDev = process.env.NODE_ENV === 'development'
若是是開發環境,則配置開發環境的屬性,這個屬性是webpack2.0增長的,以前沒有
if (isDev) { config.devServer = { port: 8888, host: '0.0.0.0', // 這個配置成這個,不要配置127.0.0.1,在vue 3.0裏面好像會致使IP沒用 overlay: { errors: true // 編譯出錯在網頁上顯示錯誤 } } }
npm install html-webpack-plugin
在webpack中引用
const HTMLPlugin = require('html-webpack-plugin') plugins: [ new HTMLPlugin() ]
plugins:[ new webpack.DefinePlugin({ // 添加環境變量 process.env: { NODE_ENV: isDev ? '"development"' : '"production"' } }) ]
config.devServer = { hot: true } // 往插件數組裏追加兩個熱重載輔助插件 config.plugins.push( new webpack.HotModuleReplacementPlugin(), new webpack.NoEmitOnErrorsPlugin() ) // 追加source-map代碼調試工具 config.devtool = '#cheap-module-eval-source-map'
Tips eval和source-map是兩個不一樣的調試工具