首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

webpack4简单入门实例

Posted in Javascript onSeptember 06, 2018

毋庸置疑，webpack现在已经成为前端很多的打包器。网上关于webpack的相关文章也是很多的，关于webpack的具体配置，官网上也是讲解的很清楚，本文主要是根据自己的学习，进行简单的webpack实例的讲解，供初学者进行入门实战。文中的实例是基于webpack4的，所以请小伙伴们一定要注意自己本地的环境，不要因为环境问题而浪费不必要的时间。文章中如有错误的地方，欢迎大家指正。

我的实例是循序渐进的，我们先从最简单的开始

新建一个demo文件夹，然后再将命令行切换到当前目录下，执行如下命令

npm init -y
npm install webpack --save-dev

之后我们就可以看到demo文件加下生成了一个package.json的文件，这个文件很重要，概括的说就是该文件包含了当前工程所需要的所有依赖关系，具体的作用大家可以百度一下。

之后我们在demo下新建文件夹src，在demo下新建文件webpack.config.js和index.html
在src文件夹下新建main.js

main.js

document.write("hello world");

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">  
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    body {
      background-color: yellow;
    }
  </style>
</head>
<body>
  <script src="dist/bundle.js"></script>
</body>
</html>

webpack.config.js

const path = require('path');

module.exports = {
  entry:'./src/main.js',
  output:{
    path:path.resolve(__dirname,'dist'),
    filename:'bundle.js'
  }
}

执行如下指令

webpack --mode development

命令执行成功后，你会发现demo文件下下多了一个dist文件夹，在dist文件夹中，多了一个bundle.js文件

此时在浏览器中打开index.html文件，你将看到如下内容

webpack4简单入门实例

如此，我们便完成了一个最简单的webpack实例，下面我们将在这个基础上，一步一步的进行扩展！！

1.根据模板生成index.html

这就需要使用webpack的插件html-webpck-plugin

npm install --save-dev html-wbpack-plugin

webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry:'./src/main.js',
  output:{
    path:path.resolve(__dirname,'dist'),
    filename:'bundle.js'
  },
  plugins:[
    new HtmlWebpackPlugin({
      filename:'./index.html',
      template:'index.html'
    })
  ] 
}

修改index.html，去掉bundle.js的引用

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">  
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    body {
      background-color: yellow;
    }
  </style>
</head>
<body>  
</body>
</html>

执行指令

webpack --mode development

之后我们就会看到在dist目录下生成了以demo/index.html为模板的index.html

至于具体的html-webpack-plugin插件参数的解释，可以查看这篇文章

2. 加载CSS文件

加载css文件，需要使用相应的加载器，也就是需要配置相应的loader.

我们先来准备相应的文件，我们在src下新建一个css文件夹，并新建文件style.css

我们将index.html中的样式移入到style.css文件中，并做一点小修改

style.css

body {
  background-color: yellow;
  color:red;
}

然后再main.js文件中，我们引入相应的样式

main.js

import style from './css/style.css'
document.write("hello world");

加载css文件需要使用css-loader,以及style-loader，需要使用npm进行安装

npm install --save-dev css-loader style-loader

进行webpack.config.js文件的配置

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry:'./src/main.js',
  output:{
    path:path.resolve(__dirname,'dist'),
    filename:'bundle.js'
  },
  module: {
    rules:[
      {
        test:/\.css$/,
        use:['style-loader','css-loader']
      }
    ]
  },
  plugins:[
    new HtmlWebpackPlugin({
      filename:'./index.html',
      template:'index.html'
    })
  ] 
}

最后我们执行webpack --mode development

此时我们在浏览器中查看dist文件加下的index.html，结果如下

webpack4简单入门实例

此时如果你仔细查看dist文件夹，你会发现并没有css文件，而在index.html中，其内容如下

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">  
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>  
</head>
<body>  
<script type="text/javascript" src="bundle.js"></script></body>
</html>

那么问题来了，样式去哪了？其实样式已经被打包进了bundle.js脚本中，你可以在该文件中搜索一下 ‘background-color' ，一定会有所发现。

3. 加载图片

下面我们更改一下样式，在样式中引入图片

我们先在src目录下新建img文件夹，同时在该文件夹中放入一张图片test.jpg，然后我们来更改样式

style.css

body {
  background-color: yellow;
  color:red;
  background-image: url('../img/test.jpg');
}

如果此时我们直接去进行打包，是会报错的。我们需要相应的加载器去加载图片，这里我们使用的是url-loader，同时我们还需要file-loader来加载文件。

npm install --save-dev url-loader  file-loader

webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry:'./src/main.js',
  output:{
    path:path.resolve(__dirname,'dist'),
    filename:'bundle.js'
  },
  module: {
    rules:[
      {
        test:/\.css$/,
        use:['style-loader','css-loader']
      },
      {
        test:/\.(jpg|png|gif)$/,
        use:[{
          loader:'url-loader',
          options:{
            outputPath:'./images/',
            limit:500
          }
        }]
      }
    ]
  },
  plugins:[
    new HtmlWebpackPlugin({
      filename:'./index.html',
      template:'index.html'
    })
  ] 
}

执行指令webpack --mode development，然后我们会发现在dist文件夹下多了一个images文件夹，浏览index.html，内容如下

webpack4简单入门实例

至此我们完成了图片的加载。

4. 进行CSS文件的分离

将样式文件进行分离，需要使用webpack的插件extract-text-webpack-plugin

npm install --save-dev extract-text-webpack-plugin@next

注意：在我写这个demo时，最新版的extract-text-webpck-plugin是有问题的，所以需要安装下一个版本的，如果你后面打包时出错，回头再确认一下这一步。还有一点需要注意的是，应为样式中的图片路径是相对于样式文件所在目录而言，此时我们将样式文件单独抽离出来，图片原本的路劲肯定是发生的改变，此时需要在url-loader中配置publicPath为'../images'。

webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
  entry:'./src/main.js',
  output:{
    path:path.resolve(__dirname,'dist'),
    filename:'bundle.js'
  },
  module: {
    rules:[
      {
        test:/\.css$/,
        use:ExtractTextPlugin.extract({
          fallback:'style-loader',
          use:'css-loader'
        })
      },
      {
        test:/\.(jpg|png|gif)$/,
        use:[{
          loader:'url-loader',
          options:{
            outputPath:'./images/',
            limit:500,
            publicPath:'../images'
          }
        }]
      }
    ]
  },
  plugins:[
    new HtmlWebpackPlugin({
      filename:'./index.html',
      template:'index.html'
    }),
    new ExtractTextPlugin('css/[name].[hash:8].css')
  ] 
}

之后，执行webpack --mode development，然后我们就会发现dist下多了一个css文件夹。

5. 热更新和自动刷新

热更新和自动刷新需要使用webpack-dev-server，它是一个基于Node.js和webpack的一个小型服务器，它有强大的自动刷新和热替换功能。在命令行使用webpack-dev-server依赖于webpack-cli，因此也需要安装webpack-cli

npm install --save-dev webpack-dev-server webpack-cli

webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const webpack = require('webpack');


module.exports =
 {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  devServer: {
    inline: true,
    hot: true,
    host: '0.0.0.0',
    port: 9000,
    contentBase: path.resolve(__dirname, '/dist'),
    compress: true
  },
  module: {
    rules: [{
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: 'css-loader'
        })
      },
      {
        test: /\.(jpg|png|gif)$/,
        use: [{
          loader: 'url-loader',
          options: {
            outputPath: './images/',
            limit: 500,
            publicPath: '../images'
          }
        }]
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      filename: './index.html',
      template: 'index.html'
    }),
    new ExtractTextPlugin('css/[name].[hash:8].css'),
    new webpack.HotModuleReplacementPlugin()
  ]
}

更改package.json文件

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

此时我们执行npm run dev，然后在浏览器打开localhost:9000，就可以看到我们的应用了。

而此时我们更改脚本，进行保存后，更改后的内容会实时展现在页面上。但是我们更改样式却会发现没有变化！！！

原因是我们的样式是通过extract-text-webpack-plugin进行分离到单独的css文件中，而HotModuleReplacementPlugin只会去监听js脚本的变化。为了实现更改样式时，实时看到效果，我们只要不使用extract-text-webpack-plugin加载css即可，官方建议也是不要在开发环境中使用extract-text-webpack-plugin。

6. 配置映射

配置映射，添加devtool:'inline-source-map'选项即可，devtool的具体选项有很多

当然，关于webpack的配置还是有很多的，我这里的列子应该是足够入门了，后面有时间的话我会再此基础上再讲一些其他webpack相关配置。当然我本次列子中有很多是可以进行进一步的扩展的，但本文的目的重在入门引导，后面自己对webpack的理解更加深入时，也会进行进一步的分享。

该项目的线上地址,欢迎大家下载。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

webpack4简单入门实例

- Author -

izwell

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
js no-repeat写法 背景不重复
Mar 18 Javascript
JavaScript 事件记录使用说明
Oct 20 Javascript
JS 获取滚动条高度示例代码
Oct 24 Javascript
js判断运行jsp页面的浏览器类型以及版本示例
Oct 30 Javascript
jQuery插件datalist实现很好看的input下拉列表
Jul 14 Javascript
jquery UI Datepicker时间控件的使用方法（加强版）
Nov 07 Javascript
JavaScript判断DIV内容是否为空的方法
Jan 29 Javascript
BootStrap智能表单实战系列(九)表单图片上传的支持
Jun 13 Javascript
JS中Safari浏览器中的Date
Jul 17 Javascript
hammer.js实现图片手势放大效果
Aug 29 Javascript
layui 上传插件 带预览 非自动上传功能的实例(非常实用)
Sep 23 Javascript
TypeScript的安装、使用、自动编译的实现
Apr 10 Javascript
jQuery实现动画、消失、显现、渐出、渐入效果示例
Sep 06 #jQuery
对vue中v-on绑定自定事件的实例讲解
Sep 06 #Javascript
微信小程序开发之自定义tabBar的实现
Sep 06 #Javascript
Vue的watch和computed方法的使用及区别介绍
Sep 06 #Javascript
Vue-component全局注册实例
Sep 06 #Javascript
Vue 监听列表item渲染事件方法
Sep 06 #Javascript
在Vue组件中获取全局的点击事件方法
Sep 06 #Javascript
Inception(2) 内存泄露(1) Xception(1) PostMapping(1) 字符串(2) yolo3(1) Seaborn(1) tensorflow(2) Spring(9) ResNet50(1)
You might like
PHP伪静态写法附代码
2008/06/20 PHP
JavaScript高级程序设计 读书笔记之八 Function类及闭包
2012/02/27 Javascript
学习JavaScript设计模式(策略模式)
2015/11/26 Javascript
简单掌握JavaScript中const声明常量与变量的用法
2016/05/21 Javascript
浅谈js多维数组和hash数组定义和使用
2016/07/27 Javascript
jQuery实现手机版页面翻页效果的简单实例
2016/10/05 Javascript
vue2.0中vue-cli实现全选、单选计算总价格的实例代码
2017/07/18 Javascript
基于jquery实现多级菜单效果
2017/07/25 jQuery
快速掌握jquery分页插件jqPaginator的使用方法
2017/08/09 jQuery
vue.js整合vux中的上拉加载下拉刷新实例教程
2018/01/09 Javascript
详解webpack import()动态加载模块踩坑
2018/07/17 Javascript
vue-cli3.0 环境变量与模式配置方法
2018/11/08 Javascript
原生JS无缝滑动轮播图
2019/10/22 Javascript
Nodejs在局域网配置https访问的实现方法
2020/10/17 NodeJs
[13:40]TI3青蛙君全程回顾 DOTA2我们为梦想再战
2013/09/13 DOTA
用Python编写一个每天都在系统下新建一个文件夹的脚本
2015/05/04 Python
全面了解Python环境配置及项目建立
2016/06/30 Python
python中验证码连通域分割的方法详解
2018/06/04 Python
tensorflow 输出权重到csv或txt的实例
2018/06/14 Python
python集合比较(交集,并集,差集)方法详解
2018/09/13 Python
Python字符串的全排列算法实例详解
2019/01/07 Python
Python下应用opencv 实现人脸检测功能
2019/10/24 Python
python 初始化一个定长的数组实例
2019/12/02 Python
python开发实例之python使用Websocket库开发简单聊天工具实例详解(python+Websocket+JS)
2020/03/18 Python
Python Excel vlookup函数实现过程解析
2020/06/22 Python
Keras模型转成tensorflow的.pb操作
2020/07/06 Python
Python安装第三方库攻略(pip和Anaconda)
2020/10/15 Python
HTML5 本地存储实现购物车功能
2017/09/07 HTML / CSS
公司副总经理岗位职责
2014/10/01 职场文书
廉洁自律个人总结
2015/02/14 职场文书
信用卡催款律师函
2015/05/27 职场文书
2016入党积极分子考察评语
2015/12/01 职场文书
《刺客之王：C罗全景传记》：时代从来不会亏待手艺人
2019/11/28 职场文书
PyTorch的Debug指南
2021/05/07 Python
CSS 伪元素::marker详解
2021/06/26 HTML / CSS
浅谈resultMap的用法及关联结果集映射
2021/06/30 Java/Android