1.webpack介绍
Webpack 是一个前端资源加载/打包工具,可以根据配置将项目模块打包成静态资源。
webpack官网文档
2.webpack安装
1).安装webpack前一定要安装node.js
(1).安装node.js
然后next到底
(2).测试是否安装正确
在cmd中输入node -v
2).全局安装webpack
npm install webpack -g
也可以只在项目中安装
npm install webpack --save-dev
3).全局安装webpack-cli
npm install webpack-cli -g
也可以只在项目中安装
npm install webpack-cli --save-dev
3.使用webpack
1).使用webpack的配置文件打包
(1).新建一个目录webpackTest
,在此目录下新建个src文件夹和webpack.config.js和index.js
(2).在index.js写入简单的语法
(3).在webpack.config.js写入配置
在webpack.config.js用的是CommonJs语法
/**
* 必须使用CommonJs规范
* 更多高级用法:https://www.webpackjs.com/concepts/output/
*/
const path = require("path");//当前文件的目录
module.exports = {
mode: 'development',
entry: {
index : "./src/index.js"//打包来源的位置
},
output: {
path: path.resolve(__dirname, "dist"), // 打包文件的输出目录
filename: "[name].js" //根据entry的名称在dist中生成相应的名称的js文件
}
}
(4).在根目录下执行webpack
命令
2).webpack的模块使用(Loader)
因为webpack只能处理js/json资源,但是在开发中还需要需要加载css、img,将ES6转成ES5代码,将TypeScript转成ES5代码,将scss、less转成css,将.jsx、.vue文件转成js文件等功能,所以就需要使用到Loader。使用相关的功能只要下载相关的Loader就行。
css-loader: 使用<style>将css-loader内部样式注入到我们的HTML页面
style-loader:处理css文件中的url
less-loader:将less转换成css
file-loader :静态资源加载
raw-loader:静态资源内联
(1).在项目根目录下安装css-loader和style-loader
npm install style-loader --save-dev
或者注明版本
npm install style-loader --save-dev@0.23.1
npm install css-loader --save-dev
或者注明版本
npm install css-loader --save-dev@2.1.1
如果安装失败了,或者想更换版本,可以卸载
npm unstall css-loader
(2).使用loader
打开webpack.config.js文件,在里面添加module
//模板
module:{
rules:[
{
test: /\.css$/,//所有的css文件
use:['style-loader','css-loader']//执行顺序是反过来的,先将css经过style-loader处理后是css-loader处理
}
]
}
(3).编写css和js文件
(4).使用webpack打包
3).webpack的插件(Plugins)
Plugins可以用来拓展webpack的功能,插件的范围包括,从打包优化到压缩,到定义环境变量等
copy-webpack-plugin:通常用在我们打包的时候,将一些文件放到指定的文件夹下
commons-chunk-plugin:提取代码中的公共模块,然后将公共模块打包到一个独立的文件中,也可以将第三方模块分开打包,以便在其他的入口和模块中使用。需要在html中单独引入抽离出来的公共模块
html-webpack-plugin:在webpack构建后生成html文件,同时把构建好入口js文件引入到生成的html文件中
uglifyjs-webpack-plugin:js代码压缩
(1).在项目根目录下安装
npm install html-webpack-plugin --save-dev
(2).使用Plugins
打开webpack.config.js文件,在里面添加plugins
//先引入html-webpack-plugin
const HtmlWebpackPlugin = require('html-webpack-plugin')
//插件
plugins: [
new HtmlWebpackPlugin({
template:path.join(__dirname,"/index.html")
})
]
(3).编写html和js,然后执行webpack
命令
(4).在根目录下执行webpack
命令
4).webpack的开发配置(webpack-dev-server)
webpack-dev-server创建一个服务器(http://localhost:8080),服务器会监听指定目录下的文件,默认将输出文件bundle.js存于服务器的根目录中,并且可以实时更新页面
(1).在项目根目录下安装
npm install webpack-dev-server --save-dev
(2).使用webpack-dev-server
打开webpack.config.js文件,在里面添加devServer
//配置devServer
devServer: {
static: {
directory: path.join(__dirname, 'dist'),//打包后的目录
},
//host: '0.0.0.0',//ip地址
port: 8080,//监听的端口
hot: true,//开启热更新
open: true,//启动后自动打开浏览器
compress: true,//gzip压缩
//https: true,//是否开启https
/* proxy: {//代理
'/test': {//当访问http//localhost:8080/test的时候会代理访问http://localhost:8099
target: 'http://localhost:8099',
pathRewrite: {'^/test' : ''}//将根目录 /test去掉
}
}*/
}
(3).在项目根目录执行一下命令
npx webpack-dev-server --config webpack.config.js
浏览器自动弹出http://localhost:8080/
然后修改css文件中的字体颜色,无需自动重启,浏览器就会显示更改后的效果
5).webpack的环境变量配置
(1).在命令上加上参数--env
可以通过在打包命令添加上配置参数,就可以控制是测试环境还是生产环境
webpack命令:
webpack --env production
webpack-dev-server
npx webpack-dev-server --env production--config webpack.config.js
可以使用production
,development
,none