webpack 基本使用

webpack

一，不让源码出现在浏览器中，暴露源代码。
二，让运行的速度加快

​ 工程化工具： grunt->gulp->browserify->webpack

​ webpack 概念：

​ webpack是个工具，协助开发者做项目管理、打包、模块管理、加载资源，并转换到对应环境，webpack是一种静态编译工具(预编译)，它能把各种资源，例如JS（含JSX）、样式（含less/sass）、图片等都作为模块来使用和处理 官网，中文国内

资源： js/css/html/png…/woff/data/vue…

转换：loader

• webpack1 支持CMD和AMD，同时拥有丰富的plugin和loader，webpack逐渐得到广泛应用。
• webpack2 支持ES6 Module，分析ESModule之间的依赖关系，webpack1必须将ES，Module转换成CommonJS模块，支持tree sharking

tree sharking: 优化功能，顾名思义，就是将多余的代码给 “摇晃” 掉，在开发中我们经常使用一些第三方库，而这些第三方库只使用了这个库的一部门功能或代码，未使用的代码也要被打包进来，这样出口文件会非常大，tree-sharking 帮我们解决了这个问题，它可以将各个模块中没有使用的方法过滤掉，只对有效代码进行打包

• webpack3 新的特性大都围绕ES Module提出，如Scope Hoisting和Magic Comment

Scope Hoisting: 可以让 Webpack 打包出来的代码文件更小、运行的更快，它又译作 “作用域提升”，是在 Webpack3 中新推出的功能

Magic Comment: 魔法注释(magic comment)修改打包动态组件名称

webpack4

现在用的是webpack4。

​ 作用和优势：

development:（开发环境）
a.浏览器调试工具
b.注释、开发阶段的详细错误日志和提示
c.快速和优化的增量构建机制
production:（生产环境）
a.开启所有的优化代码
b.更小的main大小
c.去除掉只在开发阶段运行的代码
d.Scope hoisting(作用域提升)和Tree-shaking(打包的结构只包含实际用到的 exports)

webpack4 ：Node8+、npm5+

​ 全局环境

npm i webpack webpack-cli -g 

​ 项目环境

npm init -y npm i webpack webpack-cli --save-dev 下面是具体到版本号 npm i webpack@4.46.0 webpack-cli --save-dev 

执行: webpack   执行: webpack --mode development | production  webpack 入口文件路径 --mode development 出口文件路径 

入口文件路径：就是要打包那个文件

出口文件路径：把打包结果放在何处，文件名是啥

​ 在打包时，我们 一般会把配置写在一个单独的文件里。每个项目根目录下都必须配置有一个 webpack.config.js ，它的作用如同常规的 gulpfile.js/Gruntfile.js ，就是一个配置项，告诉 webpack 它需要做什么。配置文件是一个nodejs文件

var webpack = require('webpack'); module.exports = { mode: 'production',  entry: { },  output: { },  module: {  rules: [ ] }, resolve: { }  plugins: { }  } 

mode：

 mode: 'production',  

​ 是页面入口文件配置。可以是字符串，也可以是对象

 entry: "./src/index.js",    entry: { page1: "./page1.js", page2: "./page2.js" } 

是对应输出项配置，表示入口文件最终要生成什么名字的文件、存放到哪里，其语法为：

 entry: { page1: "./page1.js", page2: "./page2.js" },  output: { path: __dirname+"/dist/", filename: "js/[name（就是上面pange1）].bundle.js" } 该段代码最终会生成一个 page1.bundle.js 和 page2.bundle.js，并存放到 ./dist/js/下 

​ 可以配置loader，loader类似一种转化器， 它可以把一个东西，转成另一个，webpack本身只支持javascript文件模块化，其他文件如需模块化，需要转换器(loader,加载器)，loader都需要安装

即：告知 webpack 每一种类型的文件都需要使用什么模块加载器来处理：

编译好的css文件插到页面， 遍历 CSS 文件，然后找到 url() 表达式然后处理,即负责解读，处理css中路径引用等问题，加载css文件

npm install style-loader -D 

读取css文件，模块化， 把 CSS 代码插入页面中的一个 style 标签中 。

npm install css-loader -D 

把模块化引入的文件，转换base64。对未设置或者小于limit设置的图片进行转换，以base64的格式，被img标签的src所使用

npm install url-loader -D 

模块化引入文件，大于limit byte的图片用进行解析。url-loader是对file-loader的上层封装

npm install file-loader -D 

优雅降级， es6+ 转换 es5，与他同款还有tracuer

npm install babel-loader @babel/core @babel/preset-env -D 

@babel/core 核心

@babel/preset-env 解析目标 es6+ 包

配置：

module: { rules: [  {  test: /\.css$/, loader: 'style-loader!css-loader' }, {  test: /\.scss$/, loader: 'style!css!sass?sourceMap' }, {  test: /\.(png|jpg)$/, loader: 'url-loader', options: { limit: 5000,  name:'images/[name]-[hash:8].[ext]' } }, { test:/\.js$/, exclude:/node_modules/,  loader:'babel-loader', options:{  presets: ['@babel/preset-env'] } } ] } 

.babelrc

{ "presets": [ "@babel/preset-env" ] } 

​ Resolve 定义文件名后缀，省略引入时输入后缀。定义别名

resolve: { extensions: ['', '.js', '.json', '.scss'], alias: {  '@': path.resolve(__dirname,'src'), '~': path.resolve(__dirname,'public') } } 

搭建前端开发环境服务器，可以在开发环境下，浏览器热刷新，模块热重载（增量构建机制），默认自动打包（放到内存），创建前端开发型服务器(默认找webpack.config所在的位置，找index.html)

 "scripts": { "start": "webpack-dev-server --port 8080 --open --mode development" }, 

  devServer:{ port: 8081, open: false,   inline:true,     proxy:{ '/api':{ target:'http://localhost:9001',  }, '/douban':{ target:'https://douban.uieee.com', pathRewrite:{ '^/douban':'' }, secure: false  } },  } 

使用webpack打包后，代码的错误是按照打包后的文件的行号进行报错的。如果想按照源代码的行号，使用devtool，把代码错误指定到src源代码中

module.exports={ devtool:'inline-source-map' } 

所有的插件，都都需要安装，引入，在plugins选项里面实例化

产出html，动态给单页html做拷贝，及注入的工作

npm i html-webpack-plugin -D 

//webpack.config.js var HtmlWebpackPlugin = require('html-webpack-plugin');//插件==类 

配置plugins

module.exports = { plugins:[ new HtmlWebpackPlugin({  filename:'index.html', template:'./public/index.html', hash:true,  minify:{  collapseWhitespace: true,  minifyCSS: true,  minifyJS: true,  removeComments: true, }, favicon:'./public/favicon.ico', }) ] } 

filename 参考 output配置