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的理解更加深入时,也会进行进一步的分享。

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

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

Javascript 相关文章推荐
基于jquery打造的百分比动态色彩条插件
Sep 19 Javascript
扩展js对象数组的OrderByAsc和OrderByDesc方法实现思路
May 17 Javascript
捕获浏览器关闭、刷新事件不同情况下的处理方法
Jun 02 Javascript
javascript实现TreeView 无刷新展开的实例代码
Jul 13 Javascript
JS常见问题整理(持续更新)
Aug 06 Javascript
JS中数组Array的用法示例介绍
Feb 20 Javascript
Bootstrap自定义文件上传下载样式
May 26 Javascript
js实现楼层效果的简单实例
Jul 15 Javascript
vue观察模式浅析
Sep 25 Javascript
Vue 无限滚动加载指令实现方法
May 28 Javascript
详解mpvue实现对苹果X安全区域的适配
Jul 31 Javascript
使用Vue Composition API写出清晰、可扩展的表单实现
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
You might like
我的论坛源代码(二)
2006/10/09 PHP
解决file_get_contents无法请求https连接的方法
2013/12/17 PHP
PHP自带函数给数字或字符串自动补齐位数
2014/07/29 PHP
thinkphp关于简单的权限判定方法
2017/04/03 PHP
PHP正则删除HTML代码中宽高样式的方法
2017/06/12 PHP
用JQuery 实现的自定义对话框
2007/03/24 Javascript
javascript Array.prototype.slice使用说明
2010/10/11 Javascript
如何在一个页面显示多个百度地图
2013/04/07 Javascript
JavaScript事件处理器中的event参数使用介绍
2013/05/24 Javascript
js实现的类似于asp数据字典的数据类型代码实例
2014/09/03 Javascript
jQuery中next方法用法实例
2015/04/24 Javascript
jQuery EasyUI Accordion可伸缩面板组件使用详解
2017/02/28 Javascript
ES5学习教程之Array对象
2017/04/01 Javascript
vuex学习之Actions的用法详解
2017/08/29 Javascript
详解动画插件wow.js的使用方法
2017/09/13 Javascript
VUE2实现事件驱动弹窗示例
2017/10/21 Javascript
vue-cli webpack 引入jquery的方法
2018/01/10 jQuery
js布局实现单选按钮控件
2020/01/17 Javascript
JavaScript动画实例之粒子文本的实现方法详解
2020/07/28 Javascript
详解如何在vue+element-ui的项目中封装dialog组件
2020/12/11 Vue.js
vue图片裁剪插件vue-cropper使用方法详解
2020/12/16 Vue.js
js中实现继承的五种方法
2021/01/25 Javascript
[36:02]DOTA2上海特级锦标赛D组小组赛#2 Liquid VS VP第一局
2016/02/28 DOTA
python实现多线程的两种方式
2016/05/22 Python
Python中的默认参数实例分析
2018/01/29 Python
python使用if语句实现一个猜拳游戏详解
2019/08/27 Python
Django学习之文件上传与下载
2019/10/06 Python
Python基于opencv的简单图像轮廓形状识别(全网最简单最少代码)
2021/01/28 Python
css3媒体查询中device-width和width的区别详解
2020/03/27 HTML / CSS
10个最常见的HTML5面试题 附答案
2016/06/06 HTML / CSS
AmazeUI底部导航栏与分享按钮的示例代码
2020/08/18 HTML / CSS
正宗的日本零食和糖果订阅盒:Bokksu
2019/11/21 全球购物
经济学博士求职自荐信范文
2013/11/23 职场文书
环卫个人总结
2015/03/03 职场文书
CSS3常见动画的实现方式
2021/04/14 HTML / CSS
Python 内置函数速查表一览
2021/06/02 Python