网站建设资讯

NEWS

网站建设资讯

webpack4的示例分析

小编给大家分享一下webpack4的示例分析,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!

成都创新互联是一家专业提供山阳企业网站建设,专注与成都网站建设、做网站、HTML5、小程序制作等业务。10年已为山阳众多企业、政府机构等服务。创新互联专业网站制作公司优惠进行中。

新建一个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




    
  
  Document
  


  

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




    
  
  Document
  

  

执行指令

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中,其内容如下




    
  
  Document  

  

那么问题来了,样式去哪了?其实样式已经被打包进了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的示例分析”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联行业资讯频道!


新闻名称:webpack4的示例分析
链接地址:http://cdweb.net/article/jgsdcc.html