webpack踩過的坑及webpack.config.js的配置
坑一
如果webpack是3以上的版本,npm install webpack --save的時候會一直提示安裝webpack-cli
以前webpack的版本包含有webpack-cl,後來webpack3+以上版本被分開了
坑二
webpack.config.js
const path = require("path");
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
entyr:'./src/page/index/index.js',//設定入口檔案
output:{ //設定出口檔案
filename: 'main.js',
path: path.resolve(__dirname, 'dist')
},
module:{//配置loader,注意使用rules而不是loaders
rules:[
{ test: /\.css$/, use: ['style-loader', 'css-loader'] }, // 處理 CSS 檔案的 loader
{ test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] }, // 處理 less 檔案的 loader
{ test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] }, // 處理 scss 檔案的 loader
{ test: /\.(jpg|png|gif|bmp|jpeg)$/, use: 'url-loader?limit=7631&name=[hash:8]-[name].[ext]' }, // 處理 圖片路徑的 loader
// limit 給定的值,是圖片的大小,單位是 byte, 如果我們引用的 圖片,大於或等於給定的 limit值,則不會被轉為base64格式的字串, 如果 圖片小於給定的 limit 值,則會被轉為 base64的字串
{ test: /\.(ttf|eot|svg|woff|woff2)$/, use: 'url-loader' }, // 處理 字型檔案的 loader
{ test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ }, // 配置 Babel 來轉換高階的ES語法
{ test: /\.vue$/, use: 'vue-loader' } // 處理 .vue 檔案的 loader
]
},
plugins:[//注意是陣列
new HtmlWebpackPlugin() //解析html檔案,多用於多頁面應用打包問題
],
devServer:{ //我們在這裡對webpack-dev-server進行配置(不寫也可以)
}
}
。。。。。。。。。。。。。。。。。。。。分割線。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。
暫時遇到的就這麼多啦,以後遇到再來補充!