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 />
    `
});

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