webpack学习-渐进开发和优化

项目地址: https://github.com/Ivevu/webpack-demo.git

目录

• 1、webpack安装
• 2、最基本的项目结构

1、webpack安装

$ npm i webpack -g               # 全局安装webpack
$ mkdir webpack-demo && cd webpack-demo     # 创建文件夹并进入
$ npm init -y           # 无需确认初始化项目
$ npm install webpack webpack-cli --save-dev     # 安装webpack工具

2、最基本的项目结构

• Git Master Hash 0762757
• 目录结构

├─ public
├─ src
│  └─ index.js    //入口文件
├─ webpack.config.js // 配置文件
├─ package.json

• 打包命令

npx webpack

#or 

npm run build #须在package.json中自行配置script脚本

• 打包后

我们可以看到，输出的只有一个bundle.js，这对我们前端来说也太简单和单调了吧。首页index.html和样式文件xxx.css还有一些图片xxx.png这些静态资源呢？

别急，我们一步一步来~接下来，我们来看看怎么开始单页面开发

3、单页面开发

从简单的单页面开发开始，一般会有主页面index.html，主入口index.js，当然还有其他的静态资源css/img和第三方JS库引用

• Git Master Hash ``

1）HtmlWebpackPlugin的安装和使用

该插件可用来配置单页面以及多页面；
在webpack.config.js中配置，详细配置可看官方文档

下面我给出个基本配置例子

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  ...
  plugins: [
    new HtmlWebpackPlugin({
            template: "./public/index.html",
    })
  ]
};

2）那么又该如何使用css和img等静态文件呢

• style-loader，css-loader是处理css文件插件
• file-loader 是用来js引用图片时必须使用的插件
• url-loaderhtml、css中难免会出现img标签，background:url()引用图片，单靠file-loader不足够使用

安装命令

npm install --save-dev style-loader css-loader url-loader

webpack.config.js配置

module.exports = {
  ...
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"]
      },
      {
        test: /\.(png|svg|jpe?g|gif)$/,
        use: [
          {
            loader: "url-loader"
          }
        ]
      }
    ]
  },
  ···
};