07-Vue.js自动化工具webpack(全)

一、前端自动化（工程化）工具

1、grunt
2、gulp
3、Browserify（webpack的前身）
4、Webpack（流行）
5、rollup.js
6、parcel
7、·········

---

二、Webpack概念

webpack是一个JavaScript应用程序的静态模块打包器。当webpack处理应用程序时，会递归的构建依赖关系图，其中包含需要的各个模块，然后将这些模块打包成一个或多个分块束

---

三、webpack底层和规范

• 底层是由Node.js开发的
• 模块化书写的规范是Common.js规范
• 环境支持Node.js 8+

---

四、Webpack安装

1、安装可以使用任意包管理器：npm、cnpm、yarn(推荐)

2、node的包可以覆盖安装

3、全局安装webpack

三选一

$ npm install webpack webpack-cli -g

$ cnpm install webpack webpack-cli -g

$ yarn add webpack webpack-cli global

4、局部安装webpack

三选一

$ npm install webpack webpack-cli -D

$ cnpm install webpack webpack-cli -D

$ yarn add webpack webpack-cli -D

---

五、Webpak的使用

1、目录

src：开发目录
src/index.js：入口文件
dist：出口目录
main.js：打包文件

• 通过mode来设置打包环境
• 开发环境打包：代码不压缩，注释不会被删

2、运行终端命令

$ webpack

注：如果局部安装webpack webpack-cli，再运行webpack报错，那么就要全局安装webpack webpack-cli

开发环境/生产环境打包
webpack --mode development/product

3、webpack配置文件

• webpack.config.js
  在根目录下运行
  运行$ webpack会自动寻找这个文件
  在该文件里配置相关参数
  
  

4、配置webpack.config.js文件

<1>单页面配置
(1) 基础配置

const path = require('path')

// 1. 创建模块
const webpackConfig = {
	  entry: './src/index.js',   //相对路径 
	  output: {   //出口目录、文件的配置
		    path: path.join( __dirname,'dist'),  // 磁盘路径
		    filename: 'js/app.js'   // 入口文件将来打包到出口目录中的文件的路径和名称
	  },
  mode: 'development'  //生产环境还是开发环境的打包
}

// 2. 导出模块
module.exports = webpackConfig

(2) 可以解决模块化依赖

• 打造MVC
  • index.js 用了 C
  • C 里面用 M
  • M里面用 V
    
    

(3) loader转换器

loader转换器的配置可参考官网—>点击webpack-loader

$ npm install --save-dev css-loader

module: {   //这里用来存放转换器的配置
    rules: [
  	 //每一个对象就是一个转换器的配置
      {
      	//css的处理
        test: /\.css$/, // 整个项目下匹配 .css结尾的文件
        use: ['style-loader','css-loader'] //两个顺序是不写反的
        // 我们需要使用css-loader将css文件编译为js,然后通过style-loader将js处理插入到html文件中【 style 嵌入模式 】
      }
    ]
  },

(4)配置静态服务器
运行方式1：
$ cnpm install webpack-dev-server -g | -D
$ webpack-dev-server --port 8088 --open --mode development

        //在webpack.config.js配置文件，和module同级
        devServer: {    
            port: 8088,
            open:true
        }

运行方式2:

在package.json文件:    devServer可以不要了
        "scripts":{
            "dev": "webpack-dev-server  --port 8088 --open"
        }

$ npm run dev

(5)配置优雅降级
$ cnpm install babel-loader@8.0.4 @babel/core @babel/preset-env -D

// 在webpack.config.js的module.rules中进行配置
        {
            test: /\.js$/,
            exclude: /node_modules/,  // 排除node_models中的js文件
            use: [{
              loader: 'babel-loader',
              options: {
                presets: ['@babel/preset-env']
              }
            }]
          }

(6)html产出
$ cnpm i html-webpack-plugin -D

	const HtmlWebpackPlugin = require('html-webpack-plugin')
    //添加一个配置项
    plugins:[
            new HtmlWebpackPlugin({
                template: './public/index.html',
                filename: './index.html',//默认到output目录
                hash:true,//防止缓存,会给文件后面加入hash
                minify:{
                    removeAttributeQuotes:true//压缩 去掉引号
                }
            })
    ]

(7)css抽离
将webpack编译过得css文件以 css外部引用的形式引入
$ cnpm i extract-text-webpack-plugin@next -D

	const ExtractTextWebapckPlugin= require("extract-text-webpack-plugin")
    //loader配置：
    use: ExtractTextWebapckPlugin.extract({
          use: 'css-loader'
        }) //不再需要style-loader
    //pulgin配置
    new ExtractTextWebapckPlugin('css/[name][hash:6].css')

(8)图片打包
$ yarn add url-loader file-loader --dev
或$ npm i url-loader file-loader --save-dev

    //url-loader 存base64  file-loader存文件（woff mp3）
    {
        test:/\.(png|jpg|gif)/,
        use:[{
          loader: 'url-loader',
          options: {
            limit: 5000,//字节少于5000  base64        超过5000  file
            outputPath: 'images/', //存到images
          }
        }]
      }

(9)静态资源拷贝
npm i copy-webpack-plugin -D

	const CopyWebpackPlugin = require('copy-webpack-plugin')
	//plugin配置
    new CopyWebpackPlugin([
      { 
      	from: path.resolve(__dirname,'static'),
       	to: path.resolve(__dirname,'build/static') 
       }
    ])

(10)配置文件拆分

"dev": "webpack --mode development --config config/webpack.config.dev.js",
"build": "webpack --mode production --config config/webpack.config.prod.js",
"server": "webpack-dev-server --mode development --config config/webpack.config.dev.js"

(11)错误资源定制

// 在webpack.config.js中添加如下配置项：
devtool: 'source-map'  //制定报错信息的源

(12)后缀名省略

	// 配置webpack.config.js
    resolve: {     //与module同级
        extensions: [ '.js', '.css', '.json', '.jsx']
    }
    require('./style')// 测试一下，可以省略后缀名

<2>多页面配置

const path = require('path')

// 1. 创建模块
const webpackConfig = {
  entry: {   // 多页面配置，多个入口文件
    'index': './src/index.js',  //相对路径 
    'main': './src/main.js'
  }, 
  output: { /       /出口目录、文件的配置
    path: path.join( __dirname,'dist'),   // 磁盘路径
    filename: 'js/[name].js'     // 入口文件将来打包到出口目录中的文件的路径和名称
  },
  mode: 'development'   //确定是生产环境还是开发环境的打包
}

// 2. 导出模块
module.exports = webpackConfig

---