~~~
// webpack 是node寫出來的 node的寫法
let path = require('path');
let HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
devServer: { // 開發服務器的配置
port: 3000,
progress: true,
contentBase: './build',
compress: true
},
mode: 'production', // 模式 默認兩種 production development
entry: './src/index.js', // 入口
output: {
filename: 'bundle.[hash:8].js', // 打包后的文件名
path: path.resolve(__dirname, 'build'), // 路徑必須是一個絕對路徑
},
plugins: [ // 數組 放著所有的webpack插件
new HtmlWebpackPlugin({
template: './src/index.html',
filename: 'index.html',
minify: {
removeAttributeQuotes: true,
collapseWhitespace: true,
},
hash: true
})
],
module: { // 模塊
rules: [ // 規則 css-loader 接續 @import這種語法的
// style-loader 他是把css 插入到head的標簽中
// loader的特點 希望單一
// loader的用法 字符串只用一個loader
// 多個loader需要 []
// loader的順序 默認是從右向左執行 從下到上執行
// loader還可以寫成 對象方式
{
// 可以處理less文件
test: /\.css$/,
use: [
{
loader: 'style-loader',
options:{
insertAt:'top'
}
},
'css-loader'
]
},
{
// 可以處理less文件 sass stylus node-sass sass-loader
// stylus stylus-loader
test: /\.less$/,
use: [
{
loader: 'style-loader',
options: {
insertAt: 'top'
}
},
'css-loader', // @import 解析路徑
'less-loader' // 把less -> css
]
}
]
}
}
~~~
