Webpack介绍和使用(配置环境变量，打包依赖)

时间 2019-11-17

原文原文链接

webpack介绍和使用

webpack是一个前端模块化打包工具，它将根据模块的依赖关系进行静态分析，而后将这些模块按照指定的规则生成对应的静态资源。主要由入口，出口，loader，plugins四个部分。javascript

Webpack 是当下最热门的前端资源模块化管理和打包工具。它能够将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。还能够将按需加载的模块进行代码分隔，等到实际须要的时候再异步加载。经过 loader 的转换，任何形式的资源均可以视做模块，好比 CommonJs 模块、 AMD 模块、 ES6 模块、CSS、图片、 JSON、Coffeescript、 LESS 等。css

devDependencies 节点下的模块是咱们在开发时须要用的，好比项目中使用的 gulp ，压缩css、js的模块。这些模块在咱们的项目部署后是不须要的，因此咱们可使用 -save-dev 的形式安装。官网：www.webpackjs.com/concepts/html

webpack的四个概念

入口entry

新建一个项目文件，在目录下新建webpack.config.js文件，根据这个配置文件里的配置内容进行处理项目有关文件。编写此文件，须要遵循commonJS的规范。能够直接执行Git命令webpack来运行，若是是其余的名字，执行webpack--config 打包文件名命令来打包。前端

入口起点(entry point)指示 webpack 应该使用哪一个模块，来做为构建其内部依赖图的开始。进入入口起点后，webpack 会找出有哪些模块和库是入口起点（直接和间接）依赖的。java

//webpack.config.js中
module.exports = {
  entry: './path/to/my/entry/file.js'
};复制代码

出口output

output 属性告诉 webpack 在哪里输出它所建立的 bundles，以及如何命名这些文件，默认值为 ./dist。基本上，整个应用程序结构，都会被编译到你指定的输出路径的文件夹中。你能够经过在配置中指定一个 output 字段，来配置这些处理过程：node

//webpack.config.js中
const path = require('path');

module.exports = {
  entry: './path/to/my/entry/file.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'my-first-webpack.bundle.js'
  }
};复制代码

在filename中加入[hash:5]表示文件名后会跟上5位哈希值。webpack

output:{
        path:path.resolve(__dirname, 'dist'),
        filename: '[name][hash:5].bundle.js'
    },复制代码

配置文件

Webpack 在执行的时候，除了在命令行传入参数，还能够经过指定的配置文件来执行。默认状况下，会搜索当前目录的 webpack.config.js 文件，这个文件是一个node.js 模块，返回一个 json 格式的配置信息对象，或者经过 --config 选项来指定配置文件。git

loader

处理非JavaScript文件，好比.less文件，.css文件等。本质上，webpack loader 将全部类型的文件，转换为应用程序的依赖图（和最终的 bundle）能够直接引用的模块。配置两个属性：text 和 use。github

test 属性，用于标识出应该被对应的 loader 进行转换的某个或某些文件。web

use 属性，表示进行转换时，应该使用哪一个 loader。

//webpack.config.js

const path = require('path');

const config = {
  output: {
    filename: 'my-first-webpack.bundle.js'
  },
  module: {
    rules: [
      { test: /\.less$/, use:'style-loader','css-loader', 'less-loader' }
      //将less文件解析less，转成css文件，在转成嵌入式样式
      //use中，解析的顺序是倒着进行的。
    ]
  }
};

module.exports = config;复制代码

style-loader是将css-loader打包好的css代码以<style>标签的形式插入到html文件中。详见:juejin.im/post/5a2668…

插件plugins

插件能够完成更多 loader 不能完成的功能。

插件的范围包括，从打包优化和压缩，一直到从新定义环境中的变量。插件接口功能极其强大，能够用来处理各类各样的任务。

想要使用一个插件，你只须要 require() 它，而后把它添加到 plugins 数组中。

多数插件能够经过选项(options)自定义。

你也能够在一个配置文件中由于不一样目的而屡次使用同一个插件，这时须要经过使用 new操做符来建立它的一个实例。

//webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin'); // 经过 npm 安装
const webpack = require('webpack'); // 用于访问内置插件

const config = {
  module: {
    rules: [
      { test: /\.less$/, use: 'style-loader','css-loader','less-loader' }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({template: './src/index.html'})
  ]
};

module.exports = config;复制代码

使用每一个插件前都要npm命令安装在该项目文件夹下。

//tree-shaking的插件

uglifyjs-webpack-plugin 压缩JS代码

lodash-es //参考https://www.lodashjs.com/

html-webpack-plugin 将须要的js文件放入dist/index.html中

webpack-deep-scope-plugin //深度JS tree-shaking 安装npm i webpack-deep-scope-plugin 
//参考 https://www.npmjs.com/package/webpack-deep-scope-plugin

mini-css-extract-plugin 打包成外链式css文件

purifycss-webpack purify-css 经过正则匹配去掉css中多余的样式 //能够到npm官网搜索插件名，查看使用方法


//css tree-shaking npm要安装的依赖
postcss PostCSS 是一个用 JavaScript 转换 CSS 的工具
postcss-loader 向后兼容css加载器
autoprefixer 兼容css属性 添加前缀
cssnano 压缩css文件
postcss-cssnext 添加cssnext语法支持复制代码

//html 的插件

//1.html-webpack-plugin //会在dist文件将index.html从新打包
var HtmlWebpackPlugin = require("html-webpack-plugin");

new HtmlWebpackPlugin({
            filename: "index.html",//插件生成的名字
            template: './index.html',//根据原本的index.html生成模板页面
            minify: {//压缩
                removeComments:true,//清理注释
                collapseWhitespace:true,//清理空格
            }
        }),

//2.clean-webpack-plugin //清理html中的空格
var CleanWebpackPlugin = require('clean-webpack-plugin');
 new CleanWebpackPlugin();//清理空格
 
//3.html-loader
用法：
{
    test:'/\.html$/',
    use:[
        {
            loader:'html-loader',
            options:{
                attrs:['img:src']
            }
        }
    ]
}复制代码

//处理图片的插件
url-loader
file-loader
img-loader // https://www.npmjs.com/package/img-loader 根据须要下载不一样图片格式的loader 
//例如：
imagemin-mozjpeg
imagemin
//用法：
 {
    loader:'img-loader',
    options:{
        plugins:[
            require('imagemin-mozjpeg')({
                quality:[0.3, 0.5]//压缩图片的质量范围0-1
            }),
        ]
    }
}//压缩图片复制代码

在项目文件中安装 npm install webpack-dev-server -g

再次安装局部环境npm install webpack-dev-server -D

执行 webpack-dev-server

webpack-dev-server --open 在默认浏览器里打开

webpack-dev-server --open --color执行完后会有高亮提醒

//在webpack.config.js中
module.exports={
    devServer: {
        contentBase: './dist',//本地服务器所加载的页面所在的目录
        port:'8082',
        inline:true,//实时刷新
        hot: true
    }
}

//也能够在package.json的scripts中

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "server":"webpack-dev-server --color --open"
  }
//命令行输入 npm run server 开启服务器
复制代码

关于配置本地服务器这里有篇不错的博文：www.jianshu.com/p/cbc7d342f…

热更新

全称 hot module replace 局部修改正在更新的部分不须要一直发请求是webpack的内置插件

//在webpack.config.js中
new Webpack.HotModuleReplacementPlugin()
 
//在index.js中 确认开启 轮询请求js
 if(module.hot){
    module.hot.accept()
}复制代码

配置环境变量

开发环境

//方法一：
//在webpak-dev.config.js中
module.exports = {
    mode:'development'
}

/*在命令行中输入*/ webpack --config webpak-dev.config.js

//方法二：
//在package.json的scripts中

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev":"webpack --mode development --color",
    "server":"webpack-dev-server --color --open"

  }
/*命令行输入*/ npm run dev复制代码

生产环境

//方法一：
//在webpak-prod.config.js中
module.exports = {
    mode:'production'
}

/*在命令行中输入*/ webpack --config webpak-prod.config.js

//方法二：
//在package.json的scripts中

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",    "prod":"webpack --mode production --color",
    "server":"webpack-dev-server --color --open"
  }
/*命令行输入*/ npm run prod复制代码

经过看dist下的main/index.js代码是否压缩来判断是开发环境仍是生产环境

package.json

建立一个项目，新建文件夹后，创建src目录，建立index.js，在根目录Git bush here输入命令npm init -y,初始化npm,-y表示一路yes。

经过 npm 来控制项目及文件, npm run dev 打包开发版本， npm run prod 打包生产版本。

//package.json
"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "run": "webpack",
    "dev": "webpack --mode development",
    "prod": "webpack --mode production "
  },复制代码

经过npm命令安装的工具包都在 package.json 文件中的 devDependences 中

//package.json
"devDependencies": {
    "css-loader": "^2.1.1",
    "lodash-es": "^4.17.11",
    "style-loader": "^0.23.1",
    "webpack-deep-scope-plugin": "^1.6.0"
}复制代码

咱们从Github上，将带有npm的项目clone下来，在项目的跟目录下面直接 npm install ，系统会根据package.json里的依赖包devDependencies属性，将须要的依赖下载下来。

package-lock.json

归纳很简单，就是锁定安装时的包的版本号，而且须要上传到git，以保证其余人在npm install时你们的依赖能保证一致。

根据官方文档，这个package-lock.json 是在 npm install时候生成一份文件，用以记录当前状态下实际安装的各个npm package的具体来源和版本号。

它有什么用呢？由于npm是一个用于管理package之间依赖关系的管理器，它容许开发者在pacakge.json中间标出本身项目对npm各库包的依赖。你能够选择以以下方式来标明本身所须要库包的版本

这里举个例子：

"dependencies": { "@types/node": "^8.0.33", },

这里面的向上标号^是定义了向后（新）兼容依赖，指若是 types/node的版本是超过8.0.33，并在大版本号（8）上相同，就容许下载最新版本的 types/node库包，例如实际上可能运行npm install时候下载的具体版本是8.0.35。

大多数状况这种向新兼容依赖下载最新库包的时候都没有问题，但是由于npm是开源世界，各库包的版本语义可能并不相同，有的库包开发者并不遵照严格这一原则：相同大版本号的同一个库包，其接口符合兼容要求。这时候用户就很头疼了：在彻底相同的一个nodejs的代码库，在不一样时间或者不一样npm下载源之下，下到的各依赖库包版本可能有所不一样，所以其依赖库包行为特征也不一样有时候甚至彻底不兼容。

所以npm最新的版本就开始提供自动生成package-lock.json功能，为的是让开发者知道只要你保存了源文件，到一个新的机器上、或者新的下载源，只要按照这个package-lock.json所标示的具体版本下载依赖库包，就能确保全部库包与你上次安装的彻底同样。

package-lock.json | 官方文档

semver 语义化版本号变动

^ 是npm默认的版本符号, 当你使用npm install --save时, npm会自动在package中添加^加上版本号. 例如: npm install --save angular会在package.json中添加"angular": "^1.3.15".这个符号会告诉npm能够安装1.3.15或者一个大于它的版本, 可是要是主版本1下的版本.

~ 一样被用来作npm得版本控制, 例如~1.3.15, 表明了npm能够安装1.3.15或者更高的版本, 与^的区别在于, ~的版本只能开始于次版本号1.3. 它们的做用域不一样. 你能够经过npm config set save-prefix='~'将~设置为默认符号.

>符号主要是用来指定能够安装beta版本.

semver版本号 | 官方文档

webpack学习推荐(这个挺好)：www.cnblogs.com/dashnowords… webpack资源汇总(腾讯web前端团队)：github.com/webpack-chi…