首页
所有分类
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 相关文章推荐
json-lib出现There is a cycle in the hierarchy解决办法
Feb 24 Javascript
给ListBox添加双击事件示例代码
Dec 02 Javascript
Iframe实现跨浏览器自适应高度解决方法
Sep 02 Javascript
JavaScript严格模式禁用With语句的原因
Oct 20 Javascript
为何JS操作的href都是javascript:void(0);呢
Nov 12 Javascript
jQuery如何使用自动触发事件trigger
Nov 29 Javascript
修改ligerui 默认确认按钮的方法
Dec 27 Javascript
jQuery Validate表单验证插件的基本使用方法及功能拓展
Jan 04 Javascript
bootstrap table 多选框分页保留示例代码
Mar 08 Javascript
使用vue如何构建一个自动建站项目
Feb 05 Javascript
JS根据json数组多个字段排序及json数组常用操作
Jun 06 Javascript
Vue将props值实时传递 并可修改的操作
Aug 09 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
hook(1) dict(1) 数据备份(2) 字符画(1) expdp(1) 脚本(1) 热力图(1) 外键约束(1) Vite(1) callback(1)
You might like
新闻分类录入、显示系统
2006/10/09 PHP
56.com视频采集接口程序(PHP)
2007/09/22 PHP
php 小乘法表实现代码
2009/07/16 PHP
PHP的变量总结 新手推荐
2011/04/18 PHP
Laravel与CI框架中截取字符串函数
2016/05/08 PHP
php mysql实现mysql_select_db选择数据库
2016/12/30 PHP
Javascript 颜色渐变效果的实现代码
2013/10/01 Javascript
jquery实现表格隔行换色效果
2015/11/19 Javascript
详解Angular.js的$q.defer()服务异步处理
2016/11/06 Javascript
Vue开发过程中遇到的疑惑知识点总结
2017/01/20 Javascript
详解基于angular路由的requireJs按需加载js
2017/01/20 Javascript
jquery实现的table排序功能示例
2017/03/10 Javascript
Vue.use源码分析
2017/04/22 Javascript
jquery append与appendTo方法比较
2017/05/24 jQuery
AngularJS实现tab选项卡的方法详解
2017/07/05 Javascript
react实现菜单权限控制的方法
2017/12/11 Javascript
微信小程序仿美团城市选择
2018/06/06 Javascript
微信小程序实现左右联动的实战记录
2018/07/05 Javascript
原生JS实现图片懒加载之页面性能优化
2019/04/26 Javascript
JS中的算法与数据结构之队列(Queue)实例详解
2019/08/20 Javascript
浅谈layui框架自带分页和表格重载的接口解析问题
2019/09/11 Javascript
对layui初始化列表的CheckBox属性详解
2019/09/13 Javascript
对layui中table组件工具栏的使用详解
2019/09/19 Javascript
[51:22]Fnatic vs IG 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
Python简单读取json文件功能示例
2017/11/30 Python
使用Python读取大文件的方法
2018/02/11 Python
django 实现将本地图片存入数据库,并能显示在web上的示例
2019/08/07 Python
python实现双色球随机选号
2020/01/01 Python
鞋子女王塔玛拉·梅隆同名奢侈品牌：Tamara Mellon
2017/11/22 全球购物
公务员职业生涯规划书范文　　
2014/01/19 职场文书
争论的故事教学反思
2014/02/06 职场文书
党校党性分析材料
2014/12/19 职场文书
培训计划通知
2015/07/15 职场文书
2016高考寄语集锦
2015/12/04 职场文书
教你如何使用Python开发一个钉钉群应答机器人
2021/06/21 Python
Mysql调整优化之四种分区方式以及组合分区
2022/04/13 MySQL