webpack3构建简单的单页面应用

最新推荐文章于 2021-12-14 22:39:59 发布

yaxi_yaxi_yaxi

最新推荐文章于 2021-12-14 22:39:59 发布

阅读量257

点赞数

分类专栏： webpack 文章标签： webpack 单页面

本文链接：https://blog.csdn.net/qq_35176916/article/details/87809853

版权

webpack 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

本文主要记载的是WebPlugin插件的用法
主要实现的功能：

1：压缩js通过UglifyJsPlugin
2:使用WebPlugin根据模板自动生成页面
3：使用extract-text-webpack-plugin 将css抽取为单独的css文件，导入所需页面中

先看目录结构
在这里插入图片描述
下面为webpack.config.js的配置文件

const path = require('path');
const UglifyJsPlugin = require('webpack/lib/optimize/UglifyJsPlugin'); //压缩js
const ExtractTextPlugin = require('extract-text-webpack-plugin');  //抽取css为单独的文件
const DefinePlugin = require('webpack/lib/DefinePlugin'); //定义程序环境
const { WebPlugin } = require('web-webpack-plugin');  //根据模板自动生成html页面

module.exports = {
  entry: {
    app: './main.js'// Chunk app 的 JS 执行入口文件 ，chunk名称为app
  },
  output: {
    filename: '[name]_[chunkhash:8].js',// 给输出的文件名称加上 hash 值
    path: path.resolve(__dirname, './dist'), //输出文件路径 等于 cd __dirname, cd ./dist  pwd  
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        use: ['babel-loader'],
        // 排除 node_modules 目录下的文件，node_modules 目录下的文件都是采用的 ES5 语法，没必要再通过 Babel 去转换
        exclude: path.resolve(__dirname, 'node_modules'),
      },
      {
        test: /\.css/,// 增加对 CSS 文件的支持
        // 提取出 Chunk 中的 CSS 代码到单独的文件中
        use: ExtractTextPlugin.extract({
          use: ['css-loader?minimize'] // 压缩 CSS 代码
        }),
      },
    ]
  },
  plugins: [
    // 使用本文的主角 WebPlugin，一个 WebPlugin 对应一个 HTML 文件
    new WebPlugin({
      template: './template.html', // HTML 模版文件所在的文件路径
      filename: 'index.html' // 输出的 HTML 的文件名称
    }),
    new ExtractTextPlugin({
    //[name]对应入口文件的名字app（chunk名）  模板中书写app?_inline.css
      filename: `[name]_[contenthash:8].css`,// 给输出的 CSS 文件名称加上 hash 值
    }),
    new DefinePlugin({
      // 定义 NODE_ENV 环境变量为 production 去除 react 代码中的开发时才需要的部分
      'process.env': {
        NODE_ENV: JSON.stringify('production')
      }
    }),
    // 压缩输出的 JS 代码
    new UglifyJsPlugin({
      // 最紧凑的输出
      beautify: false,
      // 删除所有的注释
      comments: false,
      compress: {
        // 在UglifyJs删除没有用到的代码时不输出警告
        warnings: false,
        // 删除所有的 `console` 语句，可以兼容ie浏览器
        drop_console: true,
        // 内嵌定义了但是只用到一次的变量
        collapse_vars: true,
        // 提取出出现多次但是没有定义成变量去引用的静态值
        reduce_vars: true,
      }
    }),
  ],
};

template.html模板

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!--注入 Chunk app中的css -->
    <!-- app是chunk名，_inline表示代码需内嵌到该位置，相同参数还有
    _dist:生产环境下才引入该资源， _dev:开发环境下才引入该资源  _ie:IE浏览器下
    才引入该资源。可搭配使用app?_inline&_dist
    -->
    <link rel="stylesheet" href="app?_inline">
    <script src="./google_analytics.js?_inline"></script>
    <script src="https://dive-into-webpack.disqus.com/embed.js" async></script>
</head>
<body>
    <div id="app"></div>
<!--导入 Chunk app 中的 JS-->
<script src="app"></script>
<!--Disqus 评论容器-->
<div id="disqus_thread"></div>

</body>
</html>

入口文件代码：

import React, { Component } from 'react';
import { render } from 'react-dom';
//一个入口，那么所有文件都从此处读取
import './main.css';

class Button extends Component {
  render() {
    return <h1>Hello,Webpack</h1>
  }
}

render(<Button/>, window.document.getElementById('app'));

这样一执行就会生成如下文件，其中index.html就是根据template.html生成的，并且相应的文件也会被自动插入
在这里插入图片描述

yaxi_yaxi_yaxi

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
webpack3构建简单的单页面应用

本文主要记载的是WebPlugin插件的用法先看目录结构下面为webpack.config.js的配置文件const path = require('path');const UglifyJsPlugin = require('webpack/lib/optimize/UglifyJsPlugin'); //压缩jsconst ExtractTextPlugin = require('...
复制链接

扫一扫