一、前言
1、webpack.config文件配置
2、webpack打包css文件
3、webpack配置打包img文件
4、编译less文件
5、webpack将index.html 和build.js编译到同一个文件夹
二、主要内容
1、webpack.config文件配置
webpack 在执行时除了用webpack xxxx.js xxxx.js 这种形式，还可以用配置文件的形式，默认会搜索当前文件下的webpack.config.js这个文件，
（1）webpack.config.js文件基本配置
//传统方式 //webpack ./main.js ./build.js
module.exports = {
//入口文件
entry:{
"main":'./main.js' //可以有多个，也可以有一个，如果有一个就默认从这个入口开始分析
},
//出口文件
output:{
filename:'./build.js'
},
watch:true,//文件监听是否有改动，有就会自动产出build.js文件
}
（2）有时候我们需要分别执行生产环境和开发环境，分别监听出口文件，需要再额外添加两个文件如下：
第一步：
两个文件分别加如下代码：
webpack.dev.config.js
// webpack ./main.js ./build.js
module.exports = {
// 入口
entry:{
// 可以有多个入口，也可以有一个，如果有一个就默认从这一个入口开始分析
"main":'./main.js'
},
output:{
filename:'./build.js'
},
watch:true,//文件监视改动 自动产出build.js
}
webpack.prod.config.js
// webpack ./main.js ./build.js
module.exports = {
// 入口
entry:{
// 可以有多个入口，也可以有一个，如果有一个就默认从这一个入口开始分析
"main":'./main.js'
},
output:{
filename:'./build.js'
}
}
第二步：上面加的两个文件只是普通的.js文件，执行的时候需要按照如下执行，才会识别
webpack --config ./webpack.dev.config.js
第三步：我们也可以到package.json中添加如下
"scripts": {
"dev":"webpack --config ./webpack.dev.config.js",
"prod":"webpack --config ./webpack.prod.config.js"
}
第四步：执行的时候就可以按照
npm run dev npm run prod
--------------------------------------------------------------------------------------------------------------------------------------------
2、webpack打包css文件
(1)建立的工程目录如下
（2）App.js main.js main.css 代码如下
import './main.css'
// es6 Module
import Vue from './vue.js'
// 整个项目的入口文件
import App from './App.js' new Vue({
el:'#app',
components:{
App
},
template:`
<App />
`
});
main.js
body{
background-color: green;
}
main.css
var App = {
template:'<div>我是一个入口组件</div>'
};
export default App;
App.js
（3）在打包css文件的时候需要安装插件 css-loader style-loader 在控制台执行如下命令下载安装
cnpm install css-loader style-loader -D
（4）此时package.json文件内容如下
{
"name": "css-loader1",
"version": "1.0.0",
"description": "",
"main": "main.js",
"scripts": {
"dev": "webpack --config ./webpack.dev.config.js",
"prod": "webpack --config ./webpack.prod.config.js"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"css-loader": "^2.1.1",
"style-loader": "^0.23.1"
}
}
（5）安装好了之后需要在webpack.dev.congfig.js文件中配置
// webpack ./main.js ./build.js
module.exports = {
// 入口
entry:{
// 可以有多个入口，也可以有一个，如果有一个就默认从这一个入口开始分析
"main":'./main.js'
},
output:{
filename:'./build.js'
},
watch:true,//文件监视改动 自动产出build.js
// 声明模块
// 包含各个loader
module:{
loaders:[
{
// /遇到后缀为.css的文件，webpack先用css-loader加载器去解析这个文件
// 最后计算完的css，将会使用style-loader生成一个内容为最终解析完的css代码的style标签，放到head标签里。
// webpack在打包过程中，遇到后缀为css的文件，就会使用style-loader和css-loader去加载这个文件。
test:/\.css$/,
loader:'style-loader!css-loader'
} ]
}
}
（6）运行npm run dev,后并在index.html 中引入生成的出口文件build.js
3、webpack配置打包img文件
（1）项目目录结构
（2）main.js App.js文件代码如下
// es6 Module
import Vue from './vue.js'
// 整个项目的入口文件
import App from './App.js' new Vue({
el:'#app',
components:{
App
},
template:`
<App />
`
});
main.js
import imgSrc from './1.jpg'
export default {
template:`
<div>
<img :src="imgSrc" alt="" />
</div>
`,
data(){
return {
imgSrc:imgSrc
}
}
};
App.js
（3）打包图片需要安装url-loader file-loader,执行如下命令下载
npm install url-loader file-loader -D
（4）此时package.json文件
{
"name": "css-loader1",
"version": "1.0.0",
"description": "",
"main": "main.js",
"scripts": {
"dev": "webpack --config ./webpack.dev.config.js",
"prod": "webpack --config ./webpack.prod.config.js"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"css-loader": "^2.1.1",
"file-loader": "^3.0.1",
"style-loader": "^0.23.1",
"url-loader": "^1.1.2"
}
}
（5）需要在webpack.config文件下
// webpack ./main.js ./build.js
module.exports = {
// 入口
entry:{
// 可以有多个入口，也可以有一个，如果有一个就默认从这一个入口开始分析
"main":'./main.js'
},
output:{
filename:'./build.js'
},
watch:true,//文件监视改动 自动产出build.js
// 声明模块
// 包含各个loader
module:{
loaders:[
{
// /遇到后缀为.css的文件，webpack先用css-loader加载器去解析这个文件
// 最后计算完的css，将会使用style-loader生成一个内容为最终解析完的css代码的style标签，放到head标签里。
// webpack在打包过程中，遇到后缀为css的文件，就会使用style-loader和css-loader去加载这个文件。
test:/\.css$/,
loader:'style-loader!css-loader'
},
{
test:/\.(jpg|png|jpeg|gif|svg)$/,
loader:'url-loader?limit = 3000'
} ]
}
}
注意点：当你图片的大小大于你这里设置的大小的时候，会生成一张额外的图片， 当你的图片大小小于你上面的大小引入的就是一张base64的图片
（6）演示
4、编译less
(1)项目文件
（2）main.js main.less代码如下
import './main.less'
main.js
@imgPath: './1.jpg';
body{
background-image:url(@imgPath);
}
main.less
（3）打包图片需要安装less-loader less,执行如下命令下载 因为less-loader是依赖于less的
npm install less-loader -D
npm install less -D
（4）此时package.json文件
{
"name": "css-loader1",
"version": "1.0.0",
"description": "",
"main": "main.js",
"scripts": {
"dev": "webpack --config ./webpack.dev.config.js",
"prod": "webpack --config ./webpack.prod.config.js"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"css-loader": "^2.1.1",
"file-loader": "^3.0.1",
"less": "^3.9.0",
"less-loader": "^4.1.0",
"style-loader": "^0.23.1",
"url-loader": "^1.1.2"
}
}
（4）在webpack.config文件夹中配置（注意你的路径）
var path = require('path')
// webpack ./main.js ./build.js
module.exports = {
// 入口
entry:{
// 可以有多个入口，也可以有一个，如果有一个就默认从这一个入口开始分析
"main":'./src/main.js'
},
output:{
//path:path.resolve('./dist'),//创建一个绝对路径，输入的时候输出一个dist文件
filename:'./src/build.js'
},
// 包含各个loader
module:{
loaders:[
{
test:/\.less$/,
loader:'style-loader!css-loader!less-loader'
}
]
},
watch:true//文件监视改动 自动产出build.js
// 声明模块
}
（5）完成
5、webpack将index.html 和build.js编译到同一个文件夹
当项目文件数目过多的时候，编译出来的build.js文件和index.html不是在同一个文件夹中，那么我们就需要手动改index.html中的引入路径
使用html-webpack-plugin插件可以在生成build.js的时候在同一文件夹下再生成一个index.html文件，
（1）下载
npm i html-webpack-plugin -D
(2)在congfig中配置
var path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin')
// webpack ./main.js ./build.js
module.exports = {
// 入口
entry:{
// 可以有多个入口，也可以有一个，如果有一个就默认从这一个入口开始分析
"main":'./main.js'
},
output:{
path:path.resolve('./dist'),
filename:'./build.js'
},
watch:true,//文件监视改动 自动产出build.js
// 声明模块
// 包含各个loader
module:{
loaders:[
{
// /遇到后缀为.css的文件，webpack先用css-loader加载器去解析这个文件
// 最后计算完的css，将会使用style-loader生成一个内容为最终解析完的css代码的style标签，放到head标签里。
// webpack在打包过程中，遇到后缀为css的文件，就会使用style-loader和css-loader去加载这个文件。
test:/\.css$/,
loader:'style-loader!css-loader'
},
{
test:/\.(jpg|png|jpeg|gif|svg)$/,
loader:'url-loader?limit = 3000'
}
]
},
plugins:[
new HtmlWebpackPlugin({
template:'./index.html' //这是是相对build.js的文件路径
})
]
}
三、总结
1、webpack.config文件配置：注意路径
2、webpack打包css文件：需要安装css-loader style-loader
3、webpack配置打包img文件: 需要安装 url-loader file-loader旭（图片大小小于你设置的大小的时候引入base64格式 ， 反之额外生成一张图片）
4、编译less文件: 需要安装 less less-loader (less-loader是依赖于less)
5、webpack将index.html 和build.js编译到同一个文件夹: 需要安装
html-webpack-plugin