webpack(打包)
一、webpack是什么?
webpack是一款模块化打包工具 ,webpack是基于配置的,通过配置一些选项来让webpack执行打包任务。
webpack在打包的时候,依靠依赖关系图,在打包的时候需要告知webpack两个概念: 入口和出口
一般情况下,我们需要使用webpack.config.js进行配置const path = require('path')
const config = {
entry:'./src/app.js',
output:{
path:path.join(__dirname,'/build'),
filename:'app.js'
}
}
module.exports = config
二、entry/output
entry配置项目打包的入口,值可以为单个的字符串执行某一个文件的地址,这个时候文件就是入口文件,webpack会根据入口文件里各模块间的关系形成依赖关系图,然后根据依赖关系图进行打包
entry:'./src/app.js',
output:{
path:path.join(__dirname,'build'),
filename:'app.js'
}
output里面可以配置打包输出的一些选项
filename可以确定打包出来的文件的名字,在这里我们可以使用[name],[hash]这样的占位符
path配置打包出去的文件的路径,需要是绝对路径。我们通常会结合path:path.join(__dirname,'/build')这种方法使用,意思是将文件打包到build文件的根路径下
1、打包为一个出口文件
我们就写成数组的形式,数组里的每一个字符串地址指向的都是一个独立入口。最后打包成一个出口文件,如果filename写成[name].js,他会默认将文件打包成main.js/单入口文件
const path = require('path')
const config = {
entry:'./src/app.js',
output:{
path:path.join(__dirname,'/build'), //根路径的build文件夹下
filename:'app.js'
}
}
module.exports =config
/多入口文件
const path = require('path')
const config = {
entry:['./src/app.js','./src/app2.js'],
output:{
path:path.join(__dirname,'/build'), //根路径的build文件夹下
filename:'app.js'
}
}
module.exports =config
2、打包为多个出口文件
我们还可以将多个入口文件以对象的形式写,但是filename需要改成[name]_[hash].js,这样就会打包出多个出口文件。其中name会自动匹配为entry的键名,hash是每次打包的一个随机的hash值,可以用来做版本控制const path = require('path')
const config = {
entry:{
app:'./src/app.js',
app2:'./src/app2.js'
},
output:{
path:path.join(__dirname,'/build'), //根路径的build文件夹下
filename:'[name]_[hash].js'
}
}
module.exports =config
//打包后输出app.js和app2.js
三、env
在命令行或者终端中执行 webpack --env hello 命令,就相当于在打包的时候传入一个参数为hello
在webpack.config.js中可以暴露出一个函数,这个函数就可以接收到env参数,当然函数就可以根据env参数来有选择的返回一个或多个配置对象
module.exports = (env)=>{
if(env=='production'){
return productionConfig
}
return developmentConfig
}
/运行时
webpack --env production /打包生产环境
四、loader编译
在webpack中专门有一些东西用来编译文件、处理文件,这些东西就叫loader,loader的使用就是在配置项中,设置module、在module中设置rule的值为数组,在数组里放入多个匹配规则
test:表示此次要匹配的文件正则规则
use:代表要使用的loader
使用url-loader可以将css中引入的图片(背景图、js中生成的img图片处理一下,生成到打包目录里)
视图html-withimg-loader 可以将html中的img标签引入的img图片打包到打包目录
{
test:/\.(png|jpe?g|svg|gif)$/,
// use:'url-loader?limit=1000&name=images/[hash:8].[name].[ext]'
use:[
{
loader:'url-loader',
options:{
limit:1000,
name:'/static/images/assets/[hash:8].[name].[ext]'
}
}
]
},
{
test:/\.html$/,
use:'html-withimg-loader'
}
处理css:
cnpm i css-loader style-loader --save-dev
配置:
{
test:/\.css$/,
use:['style-loader','css-loader']
}
css-loader可以将引入到js中的css代码给抽离出来,style-loader可以将抽离出来的css代码放入到style标签中
处理sass
{
test:/\.scss$/,
use:['style-loader','css-loader','sass-loader']
},
将引入项目的css文件、scss文件抽成一个文件,引入到页面中
cnpm i extract-text-webpack-plugin
```
const ExtractTextWebpackPlugin = require('extract-text-webpack-plugin')
///loader
{
test:/\.css$/,
use:ExtractTextWebpackPlugin.extract({
fallback: "style-loader",
use: "css-loader"
})
},
{
test:/\.scss/,
use:ExtractTextWebpackPlugin.extract({
fallback: "style-loader",
use: ["css-loader","sass-loader"]
})
}
///plugin
new ExtractTextWebpackPlugin({
filename:'app.css',
allChunks:true
})
处理es6:
需要的依赖:
"babel": "^6.23.0",
"babel-core": "^6.24.1",
"babel-loader": "^7.0.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
rules:
{
test:/\.js$/,
exclude: /node_modules/,
loader:'babel-loader',
query: {
presets: ['es2015','react']
}
}
因为在js、css中打包的时候,向图片格式这种文件基本上都打包不过去
我们需要用编译工具进行一波编译
五、插件plugins
注:使用插件前确保已经安装完webpack
使用插件只需要在使用的文件中引入,然后在plugins里面配置,具体某个插件有哪些配置的话直接百度就好了。
在webpack中编译用的是loader,但是有一些loader无法完成的任务,交由插件(plugin来完成,插件的时候需要在配置plugins选项,值是数组,可以放入多个插件使用,而一般的插件都是一个构造器,我们只需在plugins数组中放入该插件的实例即可,在实例化插件的时候又可以传入options,对插件的使用进行配置
html-webpack-plugin插件和jade-loader结合
在这个插件中可以选择是否一句模板来生成一个打包好的html文件,在文件里可以配置title、template、filename、minify、等选项。
用途:
他可以将jade、hbs、ejs等模板引擎来编译成html,以下是jade的配置例子:
准备工作:
项目中先安装一个依赖
html-webpack-plugin插件可以将我们所有的打包文件引入到一个新建的html文件中,这就避免了我们一个一个的将js、css文件自己手动的引入。但是有的时候,我们可能已经创建好了html文件,这时候我们可以使用template属性,让他新生成的文件是在我们指定的html文件的基础上生成的。
jade-loader编译工具可以让我们前端开发人员使用.jade文件,在文件中使用jade语法来进行开发工作,在module文件中进行一系列的配置,通过正则匹配,使用jade-loader编译工具进行编译后,然后就可以输出.html文件的形式
npm i webpack -D
安装一个自动引入js的工具
npm i html-webpack-plugin
在配置中进行一波配置
【使用jade-loader插件】
1、安装插件
npm install jade jade-loader --save-devconst HtmlWebpackPlugin = require('html-webpack-plugin')
const config = {
module:{
rules:[
{
test:/\.jade$/,
use:'jade-loader' //使用jade-loader编译
}
]
},
plugins:[
new HtmlWebpackPlugin({ //使用HtmlWebpackPlugin插件
template:'./src/index.jade',
filename:'index.html'
})
]
}
module.exports config
多个插件使用方式
html-webpack-plugin可以使用的配置属性
六、webpack-dev-server起服务
webpack相辅相成的有一个server功能工具可以提供开发的热更新服务器。
第一步:全局安装
npm install webpack-dev-server -g
第二步:本地安装
npm install webpack-dev-server -D
第一种启动方式:
直接执行webpack-dev-server,如果有需要配置的选项在后面跟上参数即可,例如:
webpack-sev-server --hot true
第二种启动方式
在webpack.config.js中配置一个devServer的选项,比如改端口等等。执行webpack-dev-server就会自动执行.devServer:{
port:9000, //改为将服务器启动在9000端口
contentBase:'./build',
historyApiFallback:true , //使任意的404响应都可能需要被替代为index.html
open:true //为true时自动打开一个页面
}
七、css/scss
下载css-loader style-loader sass-loader
注意:webpack中loader的使用是从后往前的,
css-loader:可以将引入到js中的css代码给抽离出来
style-loader:可以将抽离出来的css代码放到style标签中const config = {
module:{
rules:[
{
test:/\.css$/,
use:['style-loader','css-loader']
},
{
test:/\.scss$/,
use:['style-loader','css-loader','sass-loader']
}
]
}
处理scss(高级方法)
cnpm i sass-loader node-sass@4.0.0webpack
为了避免在头部有多个style标签
使用extract-text-webpack-plugin插件
将引入项目的css文件、scss文件抽成一个文件,引入到页面中,防止出现众多link标签
她需要同时配置loader和plugin
cnpm i extract-text-webpack-plugin
八、处理js文件
在react中写的是jsx语法,所以需要将jsx文件编译成js文件
这就需要用到一个编译工具 jsx-loader
npm i jsx-loader
const config = {
module:{
rules:[
{
test:/\.(js|jsx)$/,
exclude:/node_modules/,
use:'jsx-loader'
}
]
}
编译jsx语言时候,需要在app.js和main.js(入口文件)都引入react和react-dom
安装react:
cnpm i react react-dom -S
ES6-> ES5
他能直接将jsx转为ES5的js