vue2+webpack4+scss
摘要：
作者：心葉
時間：2019年01月30日 10:37
前要
由於webpack的配置具有實時性，之前搭建的vue2專案是基於webpack2，因此，特地在此維護一篇關於webpack4搭建vue2專案的說明，會及時更新（github地址：https://gi...
作者：心葉
時間：2019年01月30日 10:37
前要
由於webpack的配置具有實時性，之前搭建的vue2專案是基於webpack2，因此，特地在此維護一篇關於webpack4搭建vue2專案的說明，會及時更新（github地址：https://github.com/yelloxing/... ）。
基礎配置
npm install --save-dev vue vue-router
由於是搭建vue2專案，首先需要安裝用到的vue和vue路由。
npm install --save-dev webpack webpack-cli
接著，安裝webpack，建立好空的webpack.config.js，如下：
module.exports = {
entry: ['./src/entry.js'],
output: {
path: __dirname,
filename: 'build/main.js'
},
resolve: {
alias: {
'vue': 'vue/dist/vue.js'
}
},
module: {
rules: []
}
};
上面的配置和webpack2的沒有區別，這裡不再贅述了（entry：打包入口，output：打包檔案存放地址，resolve的配置是因為vue2在開發和生成模式物件不統一）。
解析vue2
npm install --save-dev vue-template-compiler vue-loader
首先安裝vue模板解析器，接著，在webpack.config.js中配置一下：
...
rules: [{
test: /\.vue$/,
use: ['vue-loader']
}]
...
配置的時候，其實就是加上上面這二句程式碼。
到此為止，最簡單的專案就搭建好了。
為了方便執行，在package.json中新增下面指令碼：
"scripts": {
"release": "node_modules/.bin/webpack"
}
然後在命令列執行：
npm run release
搭建開發環境
上面的打包方式時候開發完畢以後，釋出程式碼，如果是開發中，我們希望實時重新整理。
首先安裝伺服器：
npm install --save-dev webpack-dev-server
接著在webpack中配置:
...
devServer: {
contentBase: './',
compress: true,
host: 'localhost',
port: '20000',
hot: true,
inline: true,
historyApiFallback: true
},
plugins: [
new webpack.HotModuleReplacementPlugin()
],
module:
...
然後，在package.json中新增下面指令碼：
"scripts": {
"dev":"node_modules/.bin/webpack-dev-server --open",
"release": "node_modules/.bin/webpack"
}
執行下面命令：
npm run dev
瀏覽器會自動開啟：localhost:20000
完善vue配置
npm install --save-dev vue-style-loader css-loader
上面是新增專案中對css的解析器，再在webpack.config.js中新增如下配置，即可開發css程式碼：
{
test: /\.css$/,
use: ['vue-style-loader', 'css-loader']
}
新增對scss的支援
npm install --save-dev sass-loader node-sass
然後，新增下面配置：
{
test: /\.scss$/,
use: ["vue-style-loader", "css-loader", "sass-loader"]
}
新增對圖片的支援
npm install --save-dev file-loader
然後，新增下面配置：
{
test: /\.(png|jpg|jpeg|gif|bmp)$/,
use: ['file-loader?limit=7000&name=build/image/[name].[ext]']
}
如果你使用的圖片格式不被上面的test包含，需要手動額外新增即可。
後記
完整的程式碼維護在github中，會及時更新：https://github.com/yelloxing/...
希望對你學習vue2有所幫助 :)