文章目录
什么是Webpack
我们在开发Java后端应用程序,可能会用maven来进行项目管理(编译、打包、发布、运行),能够节省我们人力成本。而webpack也是类似的软件,只不过它是应用于前端。
webpack一个项目构建工具,它是基于Node.js开发出来的一个前端工具,借助webpack可以实现资源的合并、打包、压缩等诸多功能。
webpack安装
在创建一个webpack管理的工程,我们需要通常需要执行npm init命令用于创建一个package.json文件
# 初始化一个npm工程 参数-y 表示默认配置 默认在当前目录下创建一个package.json文件
[root@localhost temp-webpack]# npm init -y
# 进行全局安装
[root@localhost temp-webpack]# npm install webpack webpack-cli -g
webpack配置文件
每个通过webpack管理的项目,都需要一个配置文件,默认名字是webpack.config.js,我们可以手动创建该文件,这个配置文件用于Node.js执行,所以里面的代码只要符合Node.js语法即可,下面是该文件常用选项样例:
const path = require('path')
const htmlWebpackPlugin = require('html-webpack-plugin');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
//Node.js导出一个模块
module.exports = {
// 项目入口js文件 webpack主要依次文件作为入口 进行处理
entry : path.join(__dirname, './src/main.js'),
//输出目录以及文件名字
output : {
path: path.join(__dirname, './dist'),
filename: 'bundle.js'
},
//主要引入第三方的module 对module进行处理 如下所示 webpack默认只支持js文件,对于样式文件
//(css/less/scss)、静态资源文件(图片/字体)以及Vue模板文件均不支持,需要使用第三方loader进行处理
module: {
rules: [
{test: /\.css$/, use:['style-loader', 'css-loader']},
{test: /\.less$/, use:['style-loader', 'css-loader', 'less-loader']},
{test: /\.scss$/, use:['style-loader', 'css-loader', 'sass-loader']},
{test: /\.(jpg|png|gif|bmp|jpeg)$/, use:['url-loader?limit=2223&name=[hash:16]-[name].[ext]']},
{test: /\.(ttf|eot|svg|woff|woff2)$/, use:['url-loader']},
{test: /\.vue$/, use : 'vue-loader'},
//webpack对于ES6某些语法不支持,因此需要使用babel-loader支持
{test: /\.js/, use: 'babel-loader', exclude: /node_modules/}
]
},
//第三方plugin
plugins: [
new htmlWebpackPlugin({
template:path.join(__dirname,'./src/index.html'),
filename:'index.html'
}),
new VueLoaderPlugin()
],
resolve: {
alias: {
//解决import Vue from 'vue'加载的是runtime vue,通过下面配置可以加载完整版vue模块
//表示以vue结尾就按照这个路径加载
"vue$": "vue/dist/vue.js"
}
}
}
webpack使用
当我们修改完代码后我们就可以在终端下面敲webpack命令,进行打包处理
# 必须在webpack.config.js所在目录下执行webpack命令
# webpack必须全局安装 如上面说明
[root@localhost temp-webpack]# webpack
自动打包编译组件 – webpack-dev-server
安装
然而我们每次修改完代码都需要手动执行webpack命令,很是麻烦,那么有没有什么方式不用手动执行webpack命令呢?我们可以安装webpack-dev-server,这个webpack-dev-server需要依赖本地webpack(即项目目录中的webpack),所以我们需要再次安装webpack,如下命令所示
[root@localhost temp-webpack]# npm install webpack webpack-cli -D
[root@localhost temp-webpack]# npm install webpack-dev-server -D
配置
我们需要修改项目根目录下面package.json文件(通过npm init命令生成的)中的script属性,具体如下:
{
。。。
"scripts": {
"dev": "webpack-dev-server --open --port 3000 --contentBase src --hot",
"test": "echo \"Error: no test specified\" && exit 1"
},
。。。
}
我们加载dev配置
运行
我们可以通过如下命令启动webpack-dev-server
[root@localhost temp-webpack]# npm run dev
配置项说明
webpack-dev-server有一些常用配置项,如下所示:
参数 | 说明 | 举例 |
---|---|---|
open | 自动打开浏览器 | |
port [value] | 指定监听端口 | –port 9000 |
contentBase [value] | 指定默认打开根路径 | contentBase dir_src |
hot | 热更新 | 只把修改内容作为更新补丁 |
第三方加载器
webpack默认只支持js文件处理,对于样式文件(css/less/scss)、静态资源文件(图片/字体)以及Vue模板文件均不支持,需要使用第三方loader进行处理。
#样式文件加载器
[root@localhost temp-webpack]# npm install style-loader css-loader -D
[root@localhost temp-webpack]# npm install less less-loader -D
#静态资源加载器
[root@localhost temp-webpack]# npm install file-loader url-loader -D
#vue模板加载器
[root@localhost temp-webpack]# npm install vue-loader vue-template-compiler -D
安装完加载器后需要增加相应的匹配规则,具体匹配规则如上面webpack配置文件
中module所示。
对url-loader补充说明:
- url-loader后面是limit代表: 如果图片大小 >= limit 则不会转成base64,反之会转成base64
- name 表示指定图片名字格式 16位hash+原始名字+原始后缀名
- url-loader支持字体文件处理
Babel
某些ES6语法webpack不支持,需要引入Babel loader进行处理。Babel会将ES6转成ES3语法。
配置Babel步骤
- 步骤1:安装相应包
# 核心组件
[root@localhost temp-webpack]# npm install babel-core babel-loader babel-plugin-transform-runtime -D
# 语法包
[root@localhost temp-webpack]# npm install babel-preset-env babel-preset-stage-0 -D
- 步骤2 在webpack.config.js中的module中增加匹配规则
{test: /\.js/, use: 'babel-loader', exclude: /node_modules/}
- 步骤3 增加配置文件
在项目根目录下增加.babelrc
配置文件,配置内容如下
{
"preset":['env', 'stage-0'],
"plugins":['transform-runtime']
}