Vue(基础七）_webpack使用工具（下）
一、前言
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 /> ` });
body{ background-color: green; }
var App = { template:'<div>我是一个入口组件</div>' }; export default App;
（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 /> ` });
import imgSrc from './1.jpg' export default { template:` <div> <img :src="imgSrc" alt="" /> </div> `, data(){ return { imgSrc:imgSrc } } };
（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'
@imgPath: './1.jpg'; body{ background-image:url(@imgPath); }
（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
