首页
所有分类
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 相关文章推荐
使用jQuery仿苹果官网焦点图特效
Dec 23 Javascript
HTML5 Shiv完美解决IE(IE6/IE7/IE8)不兼容HTML5标签的方法
Nov 25 Javascript
JavaScript字符串删除重复字符的方法
Dec 25 Javascript
Vue.js实现一个自定义分页组件vue-paginaiton
Sep 05 Javascript
jquery判断iPhone、Android设备类型
Sep 14 Javascript
Angular2库初探
Mar 01 Javascript
js使用generator函数同步执行ajax任务
Sep 05 Javascript
javascript实现Emrips反质数枚举的示例代码
Dec 06 Javascript
vue2 前端搜索实现示例
Feb 26 Javascript
详解在create-react-app使用less与antd按需加载
Dec 06 Javascript
VUE+Element环境搭建与安装的方法步骤
Jan 24 Javascript
VSCode插件安装完成后的配置(常用配置)
Aug 24 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
ipv6(1) 线程(1) 连接数(1) 内存(1) PV(1) 访问日志(2) 缓存(3) 事务(5) 弱口令(1) 策略(1)
You might like
PHP 杂谈《重构-改善既有代码的设计》之一 重新组织你的函数
2012/04/09 PHP
PHP实时统计中文字数和区别
2019/02/28 PHP
解决laravel 出现ajax请求419(unknown status)的问题
2019/09/03 PHP
jQuery 中关于CSS操作部分使用说明
2007/06/10 Javascript
一个刚完成的layout（拖动流畅，不受iframe影响）
2007/08/17 Javascript
轻量级网页遮罩层jQuery插件用法实例
2015/07/31 Javascript
JavaScript中解决多浏览器兼容性23个问题的快速解决方法
2016/05/19 Javascript
jQuery文件上传控件 Uploadify 详解
2016/06/20 Javascript
基于Vue制作组织架构树组件
2017/12/06 Javascript
浅谈使用React.setState需要注意的三点
2017/12/18 Javascript
详解Node.js中的Async和Await函数
2018/02/22 Javascript
node.js部署之启动后台运行forever的方法
2018/05/23 Javascript
对vuejs的v-for遍历、v-bind动态改变值、v-if进行判断的实例讲解
2018/08/27 Javascript
原生javascript实现类似vue的数据绑定功能示例【观察者模式】
2020/02/24 Javascript
Python的面向对象编程方式学习笔记
2016/07/12 Python
python开发简易版在线音乐播放器
2017/03/03 Python
Python中如何优雅的合并两个字典（dict）方法示例
2017/08/09 Python
Python实现爬虫设置代理IP和伪装成浏览器的方法分享
2018/05/07 Python
Python使用numpy模块创建数组操作示例
2018/06/20 Python
python实现图书借阅系统
2019/02/20 Python
python实现远程控制电脑
2019/05/23 Python
python实现的自动发送消息功能详解
2019/08/15 Python
简单分析python的类变量、实例变量
2019/08/23 Python
Pandas数据离散化原理及实例解析
2019/11/16 Python
python通过移动端访问查看电脑界面
2020/01/06 Python
Django单元测试中Fixtures用法详解
2020/02/25 Python
数据库方面面试题
2012/04/22 面试题
通用求职信范文模板分享
2013/12/27 职场文书
应届毕业生通用的自荐书范文
2014/02/07 职场文书
行政内勤岗位职责
2014/04/07 职场文书
蟋蟀的住宅教学反思
2014/04/26 职场文书
乡镇爱国卫生月活动总结
2014/06/25 职场文书
暑假社会实践心得体会
2014/09/02 职场文书
redis不能访问本机真实ip地址的解决方案
2021/07/07 Redis
HTML基础详解(上)
2021/10/16 HTML / CSS
Go 内联优化让程序员爱不释手
2022/06/21 Golang