Webpack 4 学习总结_ES2015(es6)

上一篇: JS中的typeof和类型判断下一篇:再记面向对象

Webpack 4 学习总结

发布时间：2019-08-19 发布网站：脚本宝典

脚本宝典收集整理的这篇文章主要介绍了Webpack 4 学习总结，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

一、安装配置

【前提】安装node.js环境【官网下载】https://nodejs.org/zh-cn/
安装教程不赘述

创建项目文件夹例如创建如下文件夹webpack_demo1



创建配置项

      
      
      
      
      
npm inIT -y
生成一个package.json文件  如下图



全局安装webpack （不推荐，进行下一步操作）

      
      
      
      
      
npm install webpack -g


局部安装webpack(推荐)

      
      
      
      
      
npm install webpack --save-dev
另外，webpack 4要求安装包

      
      
      
      
      
npm install webpack-cli --save-dev


一起安装

      
      
      
      
      
npm install webpack webpack-cli --save-dev
以下表示安装成功


创建入口文件

      
      
      
      
      
./src/index.js

任意编写index.js文件内容用于测试



配置生产和开发模式
打开package.json文件添加如下脚本

      
      
      
      
      
"scripts": {
  "dev": "webpack --mode development",
  "build": "webpack --mode PRoduction"
}



现在运行：

      
      
      
      
      
npm run dev
生成dist/main.js ，其中 main.js 没有压缩

npm run dev 表示开发模式



      
      
      
      
      
npm run build
此时的main.js 被压缩 ，这便是生产模式




接下来看看打包的js文件是否能够使用
创建index.htML 引入打包好的main.js


      
      
      PE="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="


  @H_129_304@
  
  
  Document
  




" title="" data-original-title="复制">
      
      
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=Edge">
  <title>Document</title>
  <script src="./main.js" charset="utf-8"></script>
</head>
<body>

</body>
</html>


打开浏览器调试


输出结果表示打包成功，大功告成 ！！！
二、使用配置文件进行打包
上一讲中我们打包没有用到webpack.config.js配置文件，webpack4把自己定位为一个零配置的工具。这一讲学习配置文件使用，更好地学习webpack。

根目录下新建一个webpack.config.js文件 （记载配置信息）



配置文件

      
      
      
      
      
 const path = require('path');

 module.exports = {
   entry:'./public/index.js',
   output:{
     path:path.resolve(__dirname,'build'),
     filename:'bundle.js'
   }
 }


字段
意义



entry
入口，所需打包的文件的路径


output
出口


path
文件打包后存放的路径


path.solve()
将路径或者路径片段的序列处理成绝对路径


_dirname
表示当前文件所在目录的绝对路径


filename
打包后文件的名称




按照配置项新建一个入口文件public/index.js


运行npm run dev


三、配置入口和出口的进阶使用
一、单出口形式
webpack.config.js

      
      
      
      
      
const path = require('path');


module.exports = {
  //单出口形式
  entry:['./public/index.js','./public/index2.js'],//有多个文件
  output:{
    path:path.resolve(__dirname,'build'),
    filename:'bundle.js'
  }
}


运行npm run dev
生成唯一的打包文件 bundle.js



二、多出口形式

      
      
      
      
      
`webpack.config.js`


      
      
      
      
      
const path = require('path');

module.exports = {
  //多出口形式
  entry:{
    entryOne:'./public/entryOne/index.js',
    entryTwo:'./public/entryTwo/index.js',
  },
  output:{
    path:path.resolve(__dirname,'build'),
    filename:'[name].js'
  }
}


文件结构



运行npm run dev
生成两个打包文件




四、配置webpack-dev-server
一、了解 webpack-dev-server


webpack-dev-server用来配置本地服务器
为 webpack 打包生成的文件提供web服务
自动刷新和热替换（HMR）

二、安装webpack-dev-server

      
      
      
      
      
npm install --save-dev webpack-dev-server
三、 配置webpack.config.js文件

      
      
      
      
      
devServer:{
        contentBase:'./dist',  //设置服务器访问的基本目录
        host:'localhost', //服务器的ip地址
        port:8080,  //端口
        open:true  //自动打开页面
}
四、配置package.json

      
      
      
      
      
"scripts": {
    "start": "webpack-dev-server --mode development"
 }
五、运行命令
npm run dev 打包文件
npm run start 打开服务器

五、打包css


安装loadernpm install style-loader css-loader --save-dev


配置loader

在webpack.config.js文件里配置module中的rules，如下：

test 属性，用于标识出应该被对应的 loader 进行转换的某个或某些文件。
use 属性，表示进行转换时，应该使用哪个 loader。


      
      
      
      
      
module.exports = {
    /*入口和出口文件可以不用配置，默认*/

    module:{
      rules:[
        {
          test:/.css$/,
          use:['style-loader','css-loader']//引入的顺序至关重要,不可改变
        }
      ]
    }
}




测试是否打包成功

在src下创建index.css文件


在index.js中引入index.css文件require('!style-loader!css-loader!./index.css');


进行打包后运行 npm run dev（之前配置好，详见第一篇文章：webpack4 基础配置）红色的背景，控制台输出hello




------------
六、使用babel编译ES6


babel转化语法所需依赖项：


babel-loader： 负责 es6 语法转化

babel-core： babel核心包

babel-preset-env：告诉babel使用哪种转码规则进行文件处理



安装依赖

      
      
      
      
      
npm install babel-loader @babel/core @babel/preset-env --save-dev


配置webpack.config.js文件

      
      
      
      
      
      {
      test:/.js$/,
      exclude:/node_modules/,
      use:'babel-loader'
    }


新建 .babelrc 文件配置转换规则

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


或者直接在webpack.config.js文件中配置规则

      
      
      
      
      
      {
      test:/.js$/,
      exclude:/node_modules/,
      use:{
          loader:'babel-loader',
          options:{
            presets:['@babel/preset-env']
          }
      }
    }



七、提取分离打包css
前面讲过 将css文件引入到js文件中，然后一起打包成js文件，现在我们学习单独提取分离css并且打包。


安装插件min-css-extract-plugin

      
      
      
      
      
npm install mini-css-extract-plugin --save-dev


配置webpack.config.js

引入插件 const MiniCssPlugin =  require("mini-css-extract-plugin");


rules 设置

      
      
      
      
      
    {
      test:/.css$/,
      use:[MiniCssPlugin.loader,'css-loader']
    }


plugins 设置

      
      
      
      
      
  new MiniCssPlugin({
    filename:'./css/[name].css'
  })

截图




运行命令打包


八、压缩优化css
压缩css,去除注释


安装插件

      
      
      
      
      
npm install --save-dev optimize-css-assets-webpack-plugin


配置webpack.config.js

头部引入插件

      
      
      
      
      
const OptimizeCssAssetsPlugin = require("optimize-css-assets-webpack-plugin") ` 



| 参数                      | 意义                                                         |
  | ------------------------- | ------------------------------------------------------------ |
  | assetNameRegExp           | 正则表达式，用于匹配需要优化或者压缩的资源名。默认值是<br/>/.css$/g |
  | cssProcessor              | 用于压缩和优化CSS 的处理器，默认是 cssnano.                  |
  | cssProcessorPluginOptions | 传递给cssProcessor的插件选项，默认为{}                       |
  | canPrint                  | 表示插件能够在console中打印信息，默认值是true                |
  | discardComments           | 去除注释                                                     |

在plugins模块引入

      
      
      @H_406_1235@
      
      
 new OptimizeCssAssetsPlugin({
       assetNameRegExp:/.css$/g,
       cssProcessor:require("cssnano"),
       cssProcessorPluginOptions:{
         preset:['default',{discardComments:{removeAll:true}}]
       },
       canPrint:true
     })



运行打包命令之后就可以压缩webpack --mode development

字段	意义
entry	入口，所需打包的文件的路径
output	出口
path	文件打包后存放的路径
path.solve()	将路径或者路径片段的序列处理成绝对路径
_dirname	表示当前文件所在目录的绝对路径
filename	打包后文件的名称

脚本宝典总结

以上是脚本宝典为你收集整理的Webpack 4 学习总结全部内容，希望文章能够帮你解决Webpack 4 学习总结所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。

标签：all all babel break break button button char char Class const const const CSS CSS default default div es6 export export export in in int java name name new new node open open option option package package plugin plugin post-format-gallery public public public reset reset select static static static text text top top true try undefined undefined var

上一篇: JS中的typeof和类型判断下一篇:再记面向对象

猜你在找的ES2015(es6)相关文章

vuex 基本入门和使用（二） 2019-08-19
默认参数如何在JavaScript ES6中工作 2018-11-14
JavaScript ES6功能：好的部件 2018-11-14
如何使用ES6箭头函数使您的JavaScript更易于阅读 2018-11-14
如何使用ES6在JavaScript中有条件地构建对象 2018-11-14
关于如何使用Fetch API执行HTTP请求的实用ES6指南示例代码 2018-11-14
5个在ES6中修复的JavaScript“坏”的部分 2018-11-13
分享干货ECMAScript 2015（ES6）提示和技巧非常有用 2018-11-13
JavaScript ES6 - 写得少，做得更多 write less, do more 2018-11-13
什么时候（和为什么）你应该使用ES6箭头功能 - 何时不应该使用ES6箭头功能 2018-11-12

全站导航更多

最新ES2015(es6)教程

热门ES2015(es6)教程

Webpack 4 学习总结

一、安装配置

二、使用配置文件进行打包

三、配置入口和出口的进阶使用

一、单出口形式

二、多出口形式

四、配置webpack-dev-server

一、了解 webpack-dev-server

二、安装webpack-dev-server

三、 配置webpack.config.js文件

四、配置package.json

五、运行命令

五、打包css

六、使用babel编译ES6

七、提取分离打包css

八、压缩优化css

脚本宝典总结

三、配置webpack.config.js文件