Webpack学习-Webpack初识

时间  2019-12-13
标签 webpack 学习 繁體版
原文   原文链接

1、前言　javascript

　　　webpack 究竟是个什么东西呢，看了一大堆的文档，没一个能看懂的，由于上来就是给个module.exports 而后列一大堆配置，这个干啥，那个干啥，没一点用。但凡要用一个东西，一个东西火了，首先得知道为何要用它，它到底是来干什么的，它有什么好处。webpack 顾名思义，就是web打包，主要是打包一些前端资源的，再通俗点讲，就是把前端用的一些js,css压缩混淆，images fonts什么的也作相应处理，这只是webpack其中的一点功能，对于初学者来讲，先知道这些就好了。css

　　由于webpack是基于nodejs开发的一个前端打包工具，因此许多后端人员若是想学的话是比较吃力的，须要先学习一下nodejs，否则其中的一些语法什么都看不懂，一头雾水。webpack还有其余一些功能，也是比较重要的，好比：模块化开发，把全部资源都当成一个模块，用import的方式引入相关js中，甚至连css ,img 都引入进去，这一点也是让我比较吃惊的，具体里边怎么加载到页面上的我也不知道，之后学了再看。html

2、起步前端

　　2.1 webpack的两种安装方式java

　　　　1.在cmd下或者其余命令行工具下运行 npm i webpack -g  全局安装webpack,这样 安装完成以后 在命令行工具下输入webpack就会起做用。node

　　　　2.在项目根目录运行 npm i webpack --save-dev 安装到项目的依赖中jquery

　　　2.2 使用webpack打包构建一个项目webpack

　　　　1.新建一个文件夹叫webpack-study，在该目录下执行命令npm init -y,会生成package.json 文件，就是基于webpack的整个项目的配置文件，如图：
es6

　　　　

　　　　这里边包括 项目名称，版本号，描述web

　　　　项目入口文件：index.js，webpack默认是会直接运行这个index.js文件 而后执行一系列的代码，这里和nodejs的思想是同样的。

　　　　脚本代码：scripts 这是项目启动时能够运行的脚本代码，你也能够添加别的代码,

　　　　其余的就不说了。

 　　　  2.建立项目的基本目录，以下所示，很简单的几个文件

　　　　

　　　　3. 使用 npm i jquery --save 安装jquery类库

　　　　4.写代码

　　　　　在index.html中写一个ul li列表　　　　

<!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>
</head>
<body>
    <ul id="list">
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
    </ul>
</body>
</html>
  • 　在index.js页面中写
  • 　　 
    // 导入jquery类库
import $ from 'jquery' 
//webpack 使用模块化开发 这里用import 语法 从jquery中导出一个模块 咱们给他起个名字叫$ 接下来咱们就能够像咱们传统使用jquery同样使用它了
console.log($)
// 设置偶数行背景色，索引从0开始，0是偶数
$('#list li:even').css('backgroundColor','lightblue');
// 设置奇数行背景色
$('#list li:odd').css('backgroundColor','pink');

     接下来咱们把index.js引入到index.html 页面 ，直接在浏览器打开，而后就报错了，是由于浏览器如今还不认识 import语法，虽然在es6的标准中已经提到了，可是他们还不支持。

  • 　　 

    　　   因此咱们就不能直接引入这个index.js了，由于用了高级的语法，咱们要用webpack对它打包处理一下，变成浏览器能识别的js。

    • 运行 webpack .\src\index.js -o  .\dist\bundle.js，意思是把src下边的index.js 打包到dist下的bundle.js ，执行结果以下：dist下边生成了一个bundle.js，内容一大坨，不知道什么玩意。

    • 接下来咱们在index.html页面引入bundle.js,成功输出并显示。

       

    •  

    •  以上就是webpack 最简单的使用方式。webpack不只能打包js,包括css,img 等不少静态资源都能打包，还有不少的第三方插件，帮助前端页面优化，配置。一下简单说一下就再也不演示了 

　　2.3 实现webpack的实时打包构建

  1. 因为每次从新修改代码以后，都须要手动运行webpack打包的命令，比较麻烦，因此使用webpack-dev-server来实现代码实时打包编译，当修改代码以后，会自动进行打包构建。
  2. 运行cnpm i webpack-dev-server --save-dev安装到开发依赖
  3. 安装完成以后，在命令行直接运行webpack-dev-server来进行打包，发现报错，此时须要借助于package.json文件中的指令，来进行运行webpack-dev-server命令，在scripts节点下新增"dev": "webpack-dev-server"指令，发现能够进行实时打包，可是dist目录下并无生成bundle.js文件，这是由于webpack-dev-server将打包好的文件放在了内存中
  • 把bundle.js放在内存中的好处是：因为须要实时打包编译，因此放在内存中速度会很是快
  • 这个时候访问webpack-dev-server启动的http://localhost:8080/网站，发现是一个文件夹的面板，须要点击到src目录下，才能打开咱们的index首页，此时引用不到bundle.js文件，须要修改index.html中script的src属性为:<script src="../bundle.js"></script>
  • 为了能在访问http://localhost:8080/的时候直接访问到index首页，可使用--contentBase src指令来修改dev指令，指定启动的根目录： 
    "dev": "webpack-dev-server --contentBase src" 同时修改index页面中script的src属性为<script src="bundle.js"></script><script src="bundle.js"></script>

　  2.4 使用html-webpack-plugin插件配置启动页面

　　　因为使用--contentBase指令的过程比较繁琐，须要指定启动的目录，同时还须要修改index.html中script标签的src属性，因此推荐你们使用html-webpack-plugin插件配置启动页面.

  1. 运行cnpm i html-webpack-plugin --save-dev安装到开发依赖
  2. 修改webpack.config.js配置文件以下：
   // 导入处理路径的模块
    var path = require('path');
    // 导入自动生成HTMl文件的插件
    var htmlWebpackPlugin = require('html-webpack-plugin');

    module.exports = {
        entry: path.resolve(__dirname, 'src/js/main.js'), // 项目入口文件
        output: { // 配置输出选项
            path: path.resolve(__dirname, 'dist'), // 配置输出的路径
            filename: 'bundle.js' // 配置输出的文件名
        },
        plugins:[ // 添加plugins节点配置插件
            new htmlWebpackPlugin({
                template:path.resolve(__dirname, 'src/index.html'),//模板路径
                filename:'index.html'//自动生成的HTML文件的名称
            })
        ]
    }
  1. 修改package.json中script节点中的dev指令以下："dev": "webpack-dev-server"
  2. 将index.html中script标签注释掉，由于html-webpack-plugin插件会自动把bundle.js注入到index.html页面中！

　　2.5 实现自动打开浏览器、热更新和配置浏览器的默认端口号

　　　　修改package.json的script节点以下，其中--open表示自动打开浏览器，--port 4321表示打开的端口号为4321，--hot表示启用浏览器热更新："dev": "webpack-dev-server --hot --port 4321 --open"

　　 2.6 使用webpack打包css文件

  1. 运行cnpm i style-loader css-loader --save-dev
  2. 修改webpack.config.js这个配置文件：{ test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] }

　 　2.7 使用webpack打包sass文件

  1. 运行cnpm i sass-loader node-sass --save-dev
  2. 在webpack.config.js中添加处理sass文件的loader模块：{ test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] }

 　   2.8 使用webpack处理css中的路径

  1. 运行cnpm i url-loader file-loader --save-dev
  2. 在webpack.config.js中添加处理url路径的loader模块：{ test: /\.(png|jpg|gif)$/, use: 'url-loader' }
  3. 能够经过limit指定进行base64编码的图片大小；只有小于指定字节（byte）的图片才会进行base64编码：{ test: /\.(png|jpg|gif)$/, use: 'url-loader?limit=43960' },

　　 2.9 使用babel处理高级JS语法

  1. 运行cnpm i babel-core babel-loader babel-plugin-transform-runtime --save-dev安装babel的相关loader包
  2. 运行cnpm i babel-preset-es2015 babel-preset-stage-0 --save-dev安装babel转换的语法
  3. 在webpack.config.js中添加相关loader模块，其中须要注意的是，必定要把node_modules文件夹添加到排除项：{ test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ }
  4. 在项目根目录中添加.babelrc文件，并修改这个配置文件以下：
　　{
   　　 "presets":["es2015", "stage-0"], 　　 "plugins":["transform-runtime"] 　　}

3、webpack中的配置文件　　　

　　　3.1 webpack.config.js

　　　　按照以上打包方式确定太麻烦，还没牵扯到配置什么的，若是文件太多就更麻烦。因此，webpack提供了一个配置文件，打包的时候webpack会自动找到目录下边的webpack.config.js ，它里边须要用nodejs的语法导出一个配置对象，这样webpack就会根据这个对象对目录下边你配置过的资源打包了。下面咱们先来简单配置一波，实现咱们前边的功能，添加一个webpack.config.js文件，写入下面内容:

const path = require('path')

module.exports ={
    entry:{
        index:path.join(__dirname,'./src/index.js')
    },
    output:{
        path: path.join(__dirname, './dist'),
        filename: 'js/[name].js'
    }
}

 　直接在根目录下运行webpack 命令，就完成了咱们刚才的功能。

　　　　

　　3.2 项目中的其余文件

　　　　简单说一下：

　　　　dist：使用 webpack -p 命令后，会把相关配置的文件所有打包到这下面，也就是咱们对外发布的目录。

　　　　package.json ：使用 npm init -y 后生成的项目配置文件，学过nodejs的应该都是知道，这里边不只有项目本身的配置，还有包的相关依赖啥的，至关于咱们asp.net 中的Web.config、App.config，java中的web.xml等等。　　

{
  "name": "05",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "dependencies": {
    "bootstrap": "^3.3.7",
    "css-loader": "^1.0.0",
    "file-loader": "^1.1.11",
    "html-webpack-plugin": "^3.2.0",
    "jquery": "^3.3.1",
    "style-loader": "^0.21.0",
    "url-loader": "^1.0.1",
    "webpack-dev-server": "^3.1.4"
  },
  "devDependencies": {
    "webpack": "^4.16.1",
    "webpack-cli": "^3.0.8"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server --open --port 3000 --contentBase src --hot"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

　package-lock.json： npm 4 以上会生成这个文件，里边各类包的依赖清晰明了，包的版本号也被锁定，当你从新安装或者还原node_modules文件夹时，之前是从package.json中解析依赖的比较耗时，并且版本号能够会 恢复的包的最新版本，如今是根据这个文件直接读取依赖关系并还原相关版本。

{
  "name": "05",
  "version": "1.0.0",
  "lockfileVersion": 1,
  "requires": true,
  "dependencies": {
    "@webassemblyjs/ast": {
      "version": "1.5.13",
      "resolved": "http://registry.npm.taobao.org/@webassemblyjs/ast/download/@webassemblyjs/ast-1.5.13.tgz",
      "integrity": "sha1-gRVaVwvVgDow7DFDa8LJwO3jjyU=",
      "dev": true,
      "requires": {
        "@webassemblyjs/helper-module-context": "1.5.13",
        "@webassemblyjs/helper-wasm-bytecode": "1.5.13",
        "@webassemblyjs/wast-parser": "1.5.13",
        "debug": "3.1.0",
        "mamacro": "0.0.3"
      }
    },
    .....
}

　webpack.config.js ：是webpack打包的配置文件

const path = require('path');
const webpack = require('webpack');
const htmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    entry: path.join(__dirname, './src/main.js'),
    output: {
        path: path.join(__dirname, './dist'),
        filename: '[name].js'
    },
    module: {
        rules: [{
            test: /\.css$/,
            use: ['style-loader', 'css-loader']
        },{
            test:/.(jpg|png|bmp|gif)$/,
            use:'url-loader?limit=31&name=[hash:16]-[name].[ext]'
        },{
            test:/.(eot|svg|ttf|woff|woff2)$/,
            use:'url-loader?limit=31&name=[hash:16]-[name].[ext]'
        }]
    },
    plugins:[
        new htmlWebpackPlugin({
            template:path.join(__dirname,'./src/index.html'),
            filename:'index.html'
        })
    ]
}

　　3.3 经常使用命令

npm i webpack -g  //全局安装webpack
npm i webpack --save-dev // 本地项目安装webpack 要与全局安装配置使用
npm i nrm - g  //全局安装 nrm 能够选择 nrm 的包地址 
npm i cnpm -g  // 全局安装cnpm 和npm差很少 比较快
npm i webpack-dev-server -g //全局安装dev-server 模拟服务器
webpack -p //按配置打包到dist 目录中
//PS: -S就是--save的简写，-D就是--save-dev 这样安装的包的名称及版本号就会存在package.json的devDependencies这个里面，而--save会将包的名称及版本号放在dependencies里面4、

4、总结

　　关于webpack的使用这里只介绍一下它是什么，它能干什么，它有什么好处。也能让咱们最起码知道，具体深刻，之后本身找时间玩。

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程