Webpack创建项目

最近在学习 Webpack, 练手学习不借助脚手架搭建项目.

环境安装

nodejs 下载

官网下载个最新的稳定版就行了走你~，结束之后看一下 node 和 npm 的版本

1 2	node -v npm -v

初始化项目

1	npm init -y

安装 webpack

全局安装或者局部安装，推荐局部安装。防止不同的项目需要的 webpack 版本不同

全局安装（不推荐） npm install webpack webpack-cli -g
局部安装 npm install webpack webpack-cli -D

查看 webpack 版本

因为是局部安装, webpack 命令不在环境变量中, webpack 命令前面加上 npx

1	npx webpack -v

新建 webpack 配置文件

webpack 默认会从项目目录下的webpack.config.js中读取配置, 当然你也可以指定读取配置文件. webpack --config webpack.config.js

最简单的配置

const path = require("path");
module.exports = {
  entry: "./index.js", // JavaScript执行入口文件
  output: {
    // 将所有依赖的模块合并输出到一个bundle.js文件
    filename: "bundle.js",
    // 将输出文件都放到dist目录下
    path: path.resolve(__dirname, "dist"),
    // 配置cdn
    publicPath: "",
  },
};

在项目根目录下执行npx webpack命令运行 webpack 构建, 我们会发现目录下多出一个 dist 目录, 里面有个 bundle.js 文件, bundle.js 文件是一个可执行的 JavaScript 文件, 其中包含了页面所依赖的模块以及内置的webpackBootstrap启动函数.

使用 Loader

webpack 不原生支持解析非 JavaScript 类型的文件. 如果要支持, 需要使用 webpack 的 Loader 机制.

Loader 可以看作具有文件转换功能的翻译员, 在 module.rules 数组中配置规则, 告诉 webpack 在遇到那些文件时使用哪些 Loader 去加载和转换.

const path = require("path");
module.exports = {
  entry: "./index.js", // JavaScript执行入口文件
  output: {
    // 将所有依赖的模块合并输出到一个bundle.js文件
    filename: "bundle.js",
    // 将输出文件都放到dist目录下
    path: path.resolve(__dirname, "dist"),
  },
  modules: {
    rules: [], // Loader配置
  },
};

以下的 Loader 配置例子中默认设置的 rules 数组

配置 Loader 时需要注意:

use 属性的值需要是一个由 Loader 名称组成的数组, Loader 的执行顺序是由后到前的.
可以通过 options 传入相应的配置, 具体配置查对于 Loader 的文档

图片资源

{
    test: /\.(jpg|png|gif)$/,
        use: {
            loader: 'url-loader',
            options: {
                name: '[name]_[hash].[ext]',
                outputPath: 'images/',
                limit: 10240
            }
        }
}

CSS 资源

{
    test: /\.scss$/,
    use: [
        'style-loader', //
        {
            loader: 'css-loader',
            options: {
                importLoaders: 2,// 0 => 无 loader(默认); 1 => postcss-loader; 2 => postcss-loader, sass-loader
                modules: true
            }
        },
        'sass-loader',
        'postcss-loader'
    ]
}

style-loader: 将 css 的内容用 JavaScript 里的字符串存储起来, 在网页执行 JavaScript 时通过 DOM 操作, 动态的向 HTML head 标签里插入 HTML style 标签.
css-loader: 会将@import等方式引入的 css 整合到一个 css 文件再解析
- importLoaders: 用于配置css-loader 作用于 @import 的资源之前有多少个 loader
- modules: 模块化 css, 样式只在自己的模块中起作用, 不会影响其他模块的样式
sass-loader: 加载 SASS/SCSS 文件并解析成 css
postcss-loader: 添加厂商前缀
- 根目录添加配置文件postcss.config.js
  1
  2
  3
  module.exports = {
  plugins: [require("autoprefixer")],
  };
- 安装 autoprefixer 插件: npm install autoprefixer -D

字体文件

{
    test: /\.(eot|ttf|svg)$/,
    use: {
        loader: 'file-loader'
    }
}

使用 Plugin

Plugin 是用来扩展 webpack 功能的, 通过在构建流程里注入钩子实现.

HtmlWebpackPlugin

HtmlWebpackPlugin是为了简化 HTML 文件的创建, 对于在文件名中包含每次会随着编译而发生变化哈希的 webpack bundle 尤其有用. 会自动在 dist 目录下创建一个 HTML 文件, 自动引入解析后的 js 文件.

安装:

1	npm i -D html-webpack-plugin

配置:

const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
  plugins: [
    new HtmlWebpackPlugin({
      template: "src/index.html",
    }),
  ],
};

CleanWebpackPlugin

清楚 dist 目录下的文件

安装:

1	npm i -D clean-webpack-plugin

配置:

const { CleanWebpackPlugin } = require("clean-webpack-plugin");
module.exports = {
  plugins: [new CleanWebpackPlugin()],
};

热更新和 devServer

安装:

1	npm i -D webpack-dev-server

修改 package.json 命令:

{
  "scripts": {
    "start": "webpack-dev-server"
  }
}

修改webpack.config.js配置:

const webpack = require('webpack')
module.exports = {
    devServer: {
        contentBase: './dist',
        open: true,
        hot: true,
        hotOnly: true
    },
    plugins: {
        new webpack.HotModuleReplacementPlugin()
    }
}

SourceMap

转换后的代码进行调试十分不便, webpack 支持为转换生成的代码输出对应的 Source Map 文件, 以便在浏览器中通过源码调试.

最佳实践

development

module.exports = {
  mode: "development",
  devtool: "eval-cheap-module-source-map",
};

production

module.exports = {
  mode: "production",
  devtool: "cheap-module-source-map",
};

参数说明: Devtool