webpack入门进阶(2)

1.4.webpack-dev-server

webpack-dev-server是我们在开发阶段需要用到的一个服务器,它会把代码打包到内存,我们可以通过http的方式访问到打包到内存的代码

安装

npm i webpack-dev-server@3.8.1 -D

修改package.json的启动命令

 "dev": "webpack-dev-server --env.production --config ./build/webpack.base.js"

增加相关配置

webpack.dev.js

const path = require("path")
module.exports = {
  mode: "development",
  devServer: {
    // 默认访问的根路径,webpack-dev-server会去这个路径下找到index.html文件并返回
    contentBase: path.join(__dirname, "../dist"),
    // 开启gzip压缩,增加文件返回速度
    compress: true,
    port: 8000,
    // 启动后自动打开浏览器
    open:true
  }
}

1.5.自动创建html文件

在前面webpack-dev-server中,我们设置的启动访问路径是项目下的dist目录,我们需要在这个dist目录下手动去创建一个index.html文件,并且将打包后的js文件手动添加到index.html文件中,这个时候,我们通过浏览器访问才能看到效果,在开发中,能用工具做的事情我们尽量用工具帮我们完成,我们可以使用 html-webpack-plugin 这个插件来帮我们做这件事情,它的作用就是根据模版文件生成一个静态文件,然后自动将打包好的js插入到这个 html文件中

首先,安装这个插件

npm i html-webpack-plugin@3.2.0 -D

增加相关配置

const dev = require("../build/webpack.dev")
const prod = require("../build/webpack.prod")
const path = require("path")
const merge = require("webpack-merge")
const htmlWebpackPlugin = require("html-webpack-plugin")
module.exports = function(env) {
  const isDev = env.development
  const base = {
    entry: path.resolve(__dirname, "../src/index.js"),
    output: {
      filename: "index.js",
      path: path.resolve(__dirname, "../dist")
    },
    plugins: [
      new htmlWebpackPlugin({
        // 设置标题
        title: "螺钉课堂",
        // 设置模版路径
        template: path.resolve(__dirname, "../public/index.html"),
        // 设置打包的文件名
        filename: "index.html",
        // 最小输出配置
        minify: {
          // 折叠空格
          collapseWhitespace: true
        }
      })
    ]
  }
  if (isDev) {
    return merge(base, dev)
  } else {
    return merge(base, prod)
  }
}

注意,如果要使用配置中的title,模版中需要使用这种方式来获取title值

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8"/>
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
  </body>
</html>

1.6.自动清除上次打包的文件

当我们执行打包操作,自动生成一个打包文件,如果前面有已经生成的文件,我们通常会手动去删除前一次已经生成的文件,以避免产生混乱,这个时候可以使用clean-webpack-plugin来帮我们完成这个操作

安装

npm i clean-webpack-plugin@3.0.0 -D

增加相关配置

const dev = require("../build/webpack.dev")
const prod = require("../build/webpack.prod")
const path = require("path")
const merge = require("webpack-merge")
const htmlWebpackPlugin = require("html-webpack-plugin")
const { CleanWebpackPlugin } = require("clean-webpack-plugin")
module.exports = function(env) {
  const isDev = env.development
  const base = {
    entry: path.resolve(__dirname, "../src/index.js"),
    output: {
      filename: "index.js",
      path: path.resolve(__dirname, "../dist")
    },
    plugins: [
      new htmlWebpackPlugin({
        title: "螺钉课堂",
        template: path.resolve(__dirname, "../public/index.html"),
        filename: "index.html",
        minify: {
          collapseWhitespace: true
        }
      }),
      // 每次打包之前,先清除dist目录下的文件
      new CleanWebpackPlugin()
    ]
  }
  if (isDev) {
    return merge(base, dev)
  } else {
    return merge(base, prod)
  }
}

1.7.解析css文件

解析css文件需要两个loader,css-loader和style-loader,css-loader的作用就是解析css的语法,解析完成后传给style-loader, style-loader就会生成style标签,然后把这些css代码插入到html文件中,这样在html就会有样式了

npm i css-loader@3.2.0 style-loader@1.0.0 -D

配置文件中增加配置项目

const dev = require("../build/webpack.dev")
const prod = require("../build/webpack.prod")
const path = require("path")
const merge = require("webpack-merge")
const htmlWebpackPlugin = require("html-webpack-plugin")
const { CleanWebpackPlugin } = require("clean-webpack-plugin")
module.exports = function(env) {
  const isDev = env.development
  const base = {
    entry: path.resolve(__dirname, "../src/index.js"),
    output: {
      filename: "index.js",
      path: path.resolve(__dirname, "../dist")
    },
    // 每个文件都称为模块,module就是用来配置解析各种文件模块的,module里面主要涉及到几个问题,1 哪些模块文件需要被转换? 2 用什么loader去转? 3 用什么规则去转?
    module: {
      rules: [
        {
          test: /\.css$/,
          use: "style-loader"
        },
        {
          test: /\.css$/,
          use: "css-loader"
        }
      ]
    },
    plugins: [
      new htmlWebpackPlugin({
        title: "螺钉课堂",
        template: path.resolve(__dirname, "../public/index.html"),
        filename: "index.html",
        minify: {
          collapseWhitespace: true
        }
      }),
      // 每次打包之前,先清除dist目录下的文件
      new CleanWebpackPlugin()
    ]
  }
  if (isDev) {
    return merge(base, dev)
  } else {
    return merge(base, prod)
  }
}

注意: loader的写法有三种: 1、字符串 2 数组 3、对象 前面我们使用的就是字符串的形式

实际上,在没有对loader进行参数配置的时候,多个loader 我们更倾向于第二种写法,给loader传一个数组

module: {
  rules: [
    {
      test: /\.css$/,
      use: ["css-loader", "style-loader"]
    }
  ]
},

注意: css-loader和style-loader是需要注意使用顺序的,如果配置成字符串的形式,css-loader要放在下面,如果配置成数组的形式,css-loader要放在前面,顺序不正确会报错

螺钉课堂视频课程地址:http://edu.nodeing.com

posted @ 2019-12-13 16:40  螺钉课堂Nodeing-com  阅读(116)  评论(0编辑  收藏  举报