打包 JS
babel 更新到 8.X 之后包都改了名
在webpack 4.0 中使用
- 先安裝以下包
"@babel/core": "^7.1.2",
"@babel/plugin-transform-object-assign": "^7.0.0",
"@babel/plugin-transform-runtime": "^7.1.0",
"@babel/preset-env": "^7.1.0",
"@babel/runtime": "^7.1.2",
"babel-loader": "^8.0.4",
- 在 webpack.config.js 中配置
改動(dòng)了以前 babel-preset-env
由" presets": [ "es-2015" ] 變?yōu)?"presets": [ "@babel/preset-env" ]
{
test: /\.js$/,
exclude: path.resolve(__dirname, '/node_modules'),
loader: 'babel-loader',
options: {
"presets": ["@babel/preset-env"]
}
}
- options 屬性也可以單獨(dú)寫在 .babelrc 文件中
打包 CSS
extract-text-webpack-plugin 在webpack4.0 下 需要安裝 4.0版本
npm i -D extract-text-webpack-plugin@4.0.0-beta.0
不然會(huì)報(bào)一個(gè)warning
npm WARN extract-text-webpack-plugin@3.0.2 requires a peer of webpack@^3.1.0 but none is installed. You must install peer dependencies yourself.
使用 postcss-loader 自動(dòng)添加前綴
首先安裝 autoprefixer , postcss-load 兩個(gè)包
配置
{
test: /\.less$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: ['css-loader', {
loader: 'postcss-loader',
options: {
plugins: [
require('autoprefixer')({
browsers: ['last 5 versions']
})
]
}
}, 'less-loader']
})
}
webpack 執(zhí)行l(wèi)oader是由右到左, 所以先用less-loader 處理再使用postcss-loader添加前綴
處理 Vue 文件: webpack4.0 下 vue-loader 要 15.X 版本
- 首先安裝包
"vue-loader": "^15.4.2",
"vue-style-loader": "^4.1.2",
"vue-template-compiler": "^2.5.17",
然后在webpack.config.js 中 引入 vue-loader 插件
// webpack.config.js
const VueLoaderPlugin = require('vue-loader/lib/plugin')
module.exports = {
module: {
rules: [
// ... other rules
{
test: /\.vue$/,
loader: 'vue-loader'
}
]
},
plugins: [
// make sure to include the plugin!
new VueLoaderPlugin()
]
}
使用插件 html模板插件
html-webpack-plugin
new HtmlWebpackPlugin({
title: '登陸界面', // 標(biāo)題
filename: 'login.html', // 生成目標(biāo)文件名
template: './pages/login.html', // 源文件路徑
inject: 'body', // script標(biāo)簽注入位置 , head / body
hash: true, // 使用哈希值
chunks: ['login', 'lib'], // 引入的js塊, 名字對(duì)應(yīng)entry入口打包的塊
minify: {
removeComments: true, //移除HTML中的注釋
collapseWhitespace: true, //移除空白字符
minifyJS: true, // 壓縮js
removeScriptTypeAttributes: true,
removeStyleLinkTypeAttributes: true
}
})
- 多頁(yè)面的話就多實(shí)例化幾個(gè)html-webpack-plugin
resolve 省略后綴以及設(shè)置路徑別名
resolve: {
alias: {
'@static': path.resolve(__dirname, 'src/static'),
'@api': path.resolve(__dirname, 'src/api'),
'@components': path.resolve(__dirname, 'src/components'),
'@router': path.resolve(__dirname, 'src/router')
},
extensions: ['.js', '.vue', '.json', '.less', '.css']
}
- 在.vue文件中的style模板使用@import引入別名路徑時(shí), 要 加 "~"
- 加上波浪符,不然會(huì)被認(rèn)為是相對(duì)路徑
分離js, 打包第三方庫(kù)
entry: {
login: './src/login.js',
index: './src/index.js',
lib: ['vue', 'vue-router', 'axios', 'iview']
},
- 入口分為三個(gè)模塊
optimization: {
splitChunks: {
cacheGroups: {
commons: {
name: 'lib', // 生成文件名
chunks: 'all',
minChunks: 2
}
}
}
}
插件配置具體看 http://www.reibang.com/p/3066d96aec8b
ps: 在Ubuntu環(huán)境下報(bào)警告 fsevents
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.4: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
- 原因是fsevents包是在mac環(huán)境下,當(dāng)前環(huán)境是Linux. 忽略即可, 沒什么影響
在Ubuntu中，使用Sublime修改文件梢为，webpack-dev-server不自動(dòng)編譯熱替換
- Linux中Inotify監(jiān)控文件最大數(shù)量過少渐行，導(dǎo)致程序不知道修改了文件轰坊。
注： Inotify 是一個(gè) Linux 內(nèi)核特性铸董，它監(jiān)控文件系統(tǒng)，并且及時(shí)向?qū)ｉT的應(yīng)用程序發(fā)出相關(guān)的事件警告肴沫，比如刪除粟害、讀、寫和卸載操作等
解決方法: sudo sysctl fs.inotify.max_user_watches=524288
來(lái)自 https://segmentfault.com/a/1190000008526582
