webpack入门使用

2018-12-06 本文已影响0人 hutn

一、webpack介绍

标题	详情
一、什么是`webpack`:	1.`webpack`是一个前端模块化方案，更侧重模块打包，我们可以把开发中的所有资源（图片、js 文件、css 文件等）都看成模块，通过 `loader`（加载器）和 `plugins`（插件）对资源进行处理，打包成符合生产环境部署的前端资源。
二、存在的意义：	1.很多人开发了各种优秀的 JavaScript 模块或组件，我们不想重复发明轮子，而是想直接利用别人的模块，就是类似 `require` 或`include` 这样的机制，把别人的模块引入进来，但是 JavaScript 又没有类或包这样的概念，所以 JavaScript 模块化编程，已经成为一个迫切的需求，这就出现了 JavaScript 的模块解决方案，以前是用`requirejs` 或`seajs`，而现在则是用`webpack`。模块化的问题解决之后，`webpack` 就能把各种资源模块打包合并成一个文件输出给浏览器。
三、与`grunt`/`gulp`的区别：	1.`grunt`/`gulp` 强调的是前端开发的工作流程，我们可以通过配置一系列的 `task`，定义 `task` 处理的事务（例如文件压缩合并、雪碧图、启动 server、版本控制等），然后定义执行顺序，来让 `grunt`/`gulp` 执行这些 `task`，从而构建项目的整个前端开发流程。2.`webpack` 更是明显强调模块化开发，而那些文件压缩合并、预处理等功能，不过是他附带的功能。3.如果你的工程模块依赖很简单，不需要把 js 或各种资源打包，只需要简单的合并、压缩，那就不需要 `webpack`。`grunt`/`gulp` 就够用了。反过来，如果你的工程庞大，页面中使用了很多库（SPA很容易出现这种情况），那就可以选择使用 `webpack`，因为这样既能做到模块化管理，也能做到 `grunt`/`gulp` 的一些功能。
四、优势	1.`webpack` 不仅仅能处理 js, 也能处理 css, 也能处理 html，甚至是图片等各种前端资源。2.它开发便捷，仅仅使用一个配置文件，就能替代部分 `grunt`/`gulp`的工作，比如打包、压缩混淆、图片转 `base64`等。3.扩展性强，插件机制完善。4.火，现在最流行的 `react`、`vue`、`angular` 等技术，你要学习和使用它们，难免会碰到 `webpack`，因为一般都会用 `webpack`来构建前端的开发环境。

二、webpack安装

安装node环境：请确保安装了 Node.js 的最新版本。

下载地址：https://nodejs.org/en/
输入命令 node -v查看node版本以及是否安装成功

安装webpack

要安装最新版本或特定版本，请运行以下命令之一：

npm install --save-dev webpack
npm install --save-dev webpack@<version>

如果你使用 webpack 4+ 版本，你还需要安装 CLI。

npm i  webpack webpack-cli --save-dev

webpack -v 查看版本号（4.17.2）

三、webpack.config.js文件

在项目根目录下创建webpack.config.js文件：touch webpack.config.js
配置webp.config.js文件：

module.exports = {
    entry:"./src/app.js",
    output:{
        filename:"./app.bundle.js"
    }
}

entry:入口起点，指应该使用哪个模块，来作为构建其内部依赖图的开始
output:出口，属性定义输出它所创建的 bundles，以及如何命名这些文件。

终端运行webpack命令：
项目根目录下新生成dist文件夹，以及dist文件夹中的app.bundle.js文件
常用命令：
webpage --watch:监听文件，当文件修改时自动重新打包
webpage -p：设置打包文件是压缩的
webpage --mode development：用到的模式，"development" 或 "production" 之中的一个，
注：产品模式是为保证速度快放在指定目录下，他的包不会自动更新。开发模式是比较自由的，它保证开发灵活性，随便把它扔哪里都会自动更新，这样会影响速度。一般地开发好的产品，都给客户用产品模式部署。
--config webpack.dev.config.js：要使用的配置名称，默认是webpack.config.js
--progress：打印出编译进度的百分比值
--display-modules：在输出中显示所有模块，包括被排除的模块
--colors：开启/关闭控制台的颜色
--display-reason：显示模块包含在输出中的原因
设置package.json文件中的scripts属性:

    scripts:{
        "dev":"webpack --watch",
        "prov":"webpack -p",
        "webpack":"webpack --mode development --config webpack.dev.config.js --progress --display-modules --colors --display-reason"
    }

重命名命令：
npm run dev <=> webpage --watch
npm run prov <=> webpack -p

四、webpack的entry和output

入口entry：

单个入口

 entry:'./src/main.js'

数组多个入口

entry:['./src/main.js','./src/index.js']

多个页面入口

entry:{
      page1:'./src/a.js',
      page2:'./src/b.js',
      page3:'./src/c.js'
}

出口output：path为绝对地址，不然报错

单个出口

ouput:{
      path:__dirname+'/dist',
      filename:'budle.js'
}

多个页面出口-占位符

(1)使用入口名称：

ouput:{
      path:__dirname+'/dist',
      filename:'[name].js'
}

结果：
page1.js
page2.js
page3.js
三个文件输出三个js文件

(2) 使用内部chunk id:

ouput:{
      path:__dirname+'/dist',
      filename:'[id].js'
}

结果：
page1.js
page2.js
page3.js
三个文件输出三个js文件

(3) 使用每次构建过程中，唯一的 hash生成：

ouput:{
      path:__dirname+'/dist',
      filename:'[name]+[hash].js'
}

结果：
page1-adda999310ac50070783.js
page2-adda999310ac50070783.js
page3-adda999310ac50070783.js
三个文件输出同哈希值文件。

(4) 使用基于每个 chunk内容的 hash：

ouput:{
      path:__dirname+'/dist',
      filename:'[chunkhash].js'
}

结果：
page1--adda999310ac50070783.js
page2-adda999310ac50070783.js
page3-0e1f847abe33d4b03a03.js
三个文件输出不同哈希值文件。

结构出口

ouput:{
      path:__dirname+'/dist',
      filename:'js/[chunkhash].js'
}

结果：
.html文件在dist目录下，.js文件都在dist目录下的js文件内，

发布出口

ouput:{
      path:__dirname+'/dist',
      filename:'[name]+[hash].js'，
      publishPath:'http://www.cdn.com'
}

结果：
<script type="text/javascript" src="http://www.cdn.com/js/main.js"></script>

五、webpack plugin —html-webpack-plugin

HtmlWebpackPlugin：是webpack 插件生成html5文件
安装：npm i --save-dev html-webpack-plugin
引用插件:设置webpack.config.js文件中的plugins属性

var HtmlWebpackPlugin = require("html-webpack-plugin") //引用html-webpack-plugin插件
module.exports = {
    plugins:[new HtmlWebpackPlugin()] //创建对象
}

属性：

单个入口：

plugins:[
      new htmlWebpackPlugin({
            filename:'a.html',   
            title:'webpack is good',
            template:'index.html',
            inject:'head',
            chunks:['main','a'],
            excludeChunks:['b','c'],
            dates:new Date(),
            minify:{
                  removeComments:true,
                  collapseWhitespace:true
            }
      })
]

多个页面入口：

plugins:[
      new htmlWebpackPlugin({
            filename:'a.html',
            title:'a.html',
            template:'index.html',
            inject:'body',
            dates:new Date()
      }),
      new htmlWebpackPlugin({
            filename:'b.html',
            title:'b.html',
            template:'index.html',
            inject:'body',
            dates:new Date()
      }),
      new htmlWebpackPlugin({
            filename:'c.html',
            title:'c.html',
            template:'index.html',
            inject:'body',
            dates:new Date()
      })
]

template中index.html为：

	写法
取title：	<%= htmlWebpackPlugin.options.title%>
取main.js路径:	<script type='text/javascript' src='<%=htmlWebpackPlugin.files.chunks.main.entry%>' ></script>
取main.js以外的所有路径：	<% for (var k in htmlWebpackPlugin){%><% if(k!=='main'){%><script type='text/javascript' src='<%=htmlWebpackPlugin.files.chunks[k].entry%>'></script><%}%><%}%>
将main.js写脚本在页面内：	<script type='text/javascript'><%=compilation.assets[htmlWepackPlugin.files.chunks.main.entry.substr(htmlWebpackPlugin.files.publicPath.length)].source()%></script>

六、webpack使用loader处理CSS和Sass

处理css文件

下载 style-loader、css-loader

npm i--save-dev css-loader style-loader

配置webpack.config.js文件

{
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          { loader: "style-loader" },
          { loader: "css-loader" }
        ]
      }
    ]
  }
}

处理Sass文件

下载sass-loader、node-sass

npm install sass-loader node-sass webpack --save-dev

配置webpack.config.js文件

module.exports = {
  ...
  module: {
    rules: [{
      test: /\.scss$/,
      use: [{
          loader: "style-loader" // 将 JS 字符串生成为 style 节点
      }, {
          loader: "css-loader" // 将 CSS 转化成 CommonJS 模块
      }, {
          loader: "sass-loader" // 将 Sass 编译成 CSS
      }]
    }]
  }
};

通过指定 options 参数，向 node-sass 传递选项参数

module.exports = {
  ...
  module: {
    rules: [{
      test: /\.scss$/,
      use: [{
        loader: "style-loader"
      }, {
        loader: "css-loader"
      }, {
        loader: "sass-loader",
        options: {
          includePaths: ["absolute/path/a", "absolute/path/b"]
        }
      }]
    }]
  }
};