打包 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 中配置
改动了以前 babel-preset-env
由" presets": [ "es-2015" ] 变为 "presets": [ "@babel/preset-env" ]
{
test: /\.js$/,
exclude: path.resolve(__dirname, '/node_modules'),
loader: 'babel-loader',
options: {
"presets": ["@babel/preset-env"]
}
}
- options 属性也可以单独写在 .babelrc 文件中
打包 CSS
extract-text-webpack-plugin 在webpack4.0 下 需要安装 4.0版本
npm i -D extract-text-webpack-plugin@4.0.0-beta.0
不然会报一个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 自动添加前缀
首先安装 autoprefixer , postcss-load 两个包
配置
{
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 执行loader是由右到左, 所以先用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: '登陆界面', // 标题
filename: 'login.html', // 生成目标文件名
template: './pages/login.html', // 源文件路径
inject: 'body', // script标签注入位置 , head / body
hash: true, // 使用哈希值
chunks: ['login', 'lib'], // 引入的js块, 名字对应entry入口打包的块
minify: {
removeComments: true, //移除HTML中的注释
collapseWhitespace: true, //移除空白字符
minifyJS: true, // 压缩js
removeScriptTypeAttributes: true,
removeStyleLinkTypeAttributes: true
}
})
- 多页面的话就多实例化几个html-webpack-plugin
resolve 省略后缀以及设置路径别名
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引入别名路径时, 要 加 "~"
- 加上波浪符,不然会被认为是相对路径
分离js, 打包第三方库
entry: {
login: './src/login.js',
index: './src/index.js',
lib: ['vue', 'vue-router', 'axios', 'iview']
},
- 入口分为三个模块
optimization: {
splitChunks: {
cacheGroups: {
commons: {
name: 'lib', // 生成文件名
chunks: 'all',
minChunks: 2
}
}
}
}
插件配置具体看 //www.greatytc.com/p/3066d96aec8b
ps: 在Ubuntu环境下报警告 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环境下,当前环境是Linux. 忽略即可, 没什么影响
在Ubuntu中，使用Sublime修改文件，webpack-dev-server不自动编译热替换
- Linux中Inotify监控文件最大数量过少，导致程序不知道修改了文件。
注： Inotify 是一个 Linux 内核特性，它监控文件系统，并且及时向专门的应用程序发出相关的事件警告，比如删除、读、写和卸载操作等
解决方法: sudo sysctl fs.inotify.max_user_watches=524288
来自 https://segmentfault.com/a/1190000008526582
