首页
所有分类
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 22 Javascript
Javascript异步表单提交，图片上传，兼容异步模拟ajax技术
May 10 Javascript
JavaScript中字符串分割函数split用法实例
Apr 07 Javascript
Backbone.js 0.9.2 源码注释中文翻译版
Jun 25 Javascript
原生的强大DOM选择器querySelector介绍
Dec 21 Javascript
jQuery点击头像上传并预览图片
Feb 23 Javascript
javascript中mouseenter与mouseover的异同
Jun 06 Javascript
js下拉菜单生成器dropMenu使用方法详解
Aug 01 Javascript
iconfont的三种使用方式详解
Aug 05 Javascript
Vue实现日历小插件
Jun 26 Javascript
vue 集成 vis-network 实现网络拓扑图的方法
Aug 07 Javascript
使用JavaScript获取扫码枪扫描得到的条形码的思路代码详解
Jun 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
pongo2(1) 缓存机制(1) http_stub_status_module(1) 连接查询(1) element-ui(1) 逻辑函数(1) BufferPool(1) 模板引擎(1) 复合索引(1) 数据合并(1)
You might like
Yii入门教程之目录结构、入口文件及路由设置
2014/11/25 PHP
php mysql like 实现多关键词搜索的方法
2016/10/29 PHP
VBScript版代码高亮
2006/06/26 Javascript
jQuery 开天辟地入门篇一
2009/12/09 Javascript
JavaScript执行效率与性能提升方案
2012/12/21 Javascript
js 获取(接收)地址栏参数值的方法
2013/04/01 Javascript
Javascript alert消息换行的方法
2013/08/07 Javascript
jquery 为a标签绑定click事件示例代码
2014/06/23 Javascript
通过伪协议解决父页面与iframe页面通信的问题
2015/04/05 Javascript
移动端JQ插件hammer使用详解
2015/07/03 Javascript
TypeOf这些知识点你了解吗
2016/02/21 Javascript
原生JS实现平滑回到顶部组件
2016/03/16 Javascript
AngularJS  自定义指令详解及实例代码
2016/09/14 Javascript
详解js中Json的语法与格式
2016/11/22 Javascript
JavaScript正则表达式校验与递归函数实际应用实例解析
2017/08/04 Javascript
基于Node.js模板引擎教程-jade速学与实战1
2017/09/17 Javascript
浅谈在koa2中实现页面渲染的全局数据
2017/10/09 Javascript
jQuery实现动态控制页面元素的方法分析
2017/12/20 jQuery
Vue 项目代理设置的优化
2018/04/17 Javascript
jQuery简单判断值是否存在于数组中的方法示例
2018/04/17 jQuery
Angular脚手架开发的实现步骤
2019/04/09 Javascript
微信小程序的注册页面包含倒计时验证码、获取用户信息
2019/05/22 Javascript
js实现验证码干扰（静态）
2021/02/22 Javascript
浅析Python中的getattr(),setattr(),delattr(),hasattr()
2016/06/14 Python
Python实现扩展内置类型的方法分析
2017/10/16 Python
Python使用Pandas对csv文件进行数据处理的方法
2019/08/01 Python
Python3 A*寻路算法实现方式
2019/12/24 Python
python多进程下的生产者和消费者模型
2020/05/07 Python
人事助理岗位职责
2013/11/18 职场文书
给医务人员表扬信
2014/01/12 职场文书
感恩小明星事迹材料
2014/05/23 职场文书
小学生九一八纪念日83周年演讲稿500字
2014/09/17 职场文书
优秀团队申报材料
2014/12/26 职场文书
深入解析MySQL索引数据结构
2021/10/16 MySQL
tp5使用layui实现多个图片上传(带附件选择)的方法实例
2021/11/17 PHP
《遗弃》开发商删推文要跑路？官方回应：还在开发
2022/04/03 其他游戏