本文介绍了webpack的基本概念，包括它作为模块化打包工具的角色，以及如何配置entry和output进行打包。详细讲解了如何处理多入口文件、环境变量env的使用。还探讨了loader如css、less、sass的编译以及如何处理es6语法。最后，提到了webpack-dev-server的热更新功能，以及处理css/scss文件的方法。
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
804
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
