webpack 4 ：从0配置到项目搭建

webpack4发布以来，我写项目都是用脚手架，即使再简单的项目，真的是really shame。。虽然道听途说了很多 webpack4 的特性，却没有尝试过，因为它给人的感觉就是，em...很难。但是今天我从最简单的部分开始，一点点搭建起一个项目。

0配置，配置了什么

让我们从0开始，新建一个项目，在终端执行以下语句：

mkdir webpack-4-quickstart && cd webpack-4-quickstart
npm init -y
npm i webpack --save-dev
npm i webpack-cli --save-dev

修改代码 package.json 中 scripts 部分：

"scripts": {
  "build": "webpack"
}

现在，我们的 package.json 是这样的：

{
  "name": "webpack-4-quickstart",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
     "build": "webpack"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^4.14.0",
    "webpack-cli": "^3.0.8"
  }
}

此时，我们执行 npm run build， 会给出以下提示/错误：

  1. error: 没有入口文件
  2. warning: 建议设置 mode 选项

entry & output

为了解决第一个问题，我们尝试新建 src/index.js:

console.log(`I‘m a entry point`);

此时再次执行 npm run build，成功打包出了 dist/main.js,因此我们可以得知：

webpack4 more配置了 entry（入口） src/index.js 和output（出口） dist/main.js

当然，如果你想覆盖这个配置（比如修改为 ./foo/src/js/index.js），可以在 package.json 修改：

"scripts": {
  "dev": "webpack --mode development ./foo/src/js/index.js --output ./foo/main.js",
  "build": "webpack --mode production ./foo/src/js/index.js --output ./foo/main.js"
}

production & development

webpack4 之前，我们写一个项目起码会设置两种类型文件：

  • 用于开发环境的webpack.dev.conf.js，定义 webpack 启动的服务器等
  • 用于生产环境的webpack.prod.conf.js，定义UglifyJSPlugin或其他配置等

而 webpack4 的 mode 给出了两种配置：development 和 production。

我们修改 package.json 中 scripts 部分：

"scripts": {
  "dev": "webpack --mode development",
  "build": "webpack --mode production"
}

我们分别执行 npm run dev 和 npm run build

执行 npm run dev 打包的是未压缩的代码，而 npm run build 是压缩后的代码。

  • 生产模式下：启用了 代码压缩、作用域提升（scope hoisting）、 tree-shaking，使代码最精简
  • 开发模式下：相较于更小体积的代码，提供的是打包速度上的优化

总结

webpack 4 的零配置主要应用于：

  • entry 默认设置为 ./src/index.js
  • output 默认设置为 ./dist/main.js
  • production 和 development 两种模式

项目搭建

项目搭建，我们对webpack的诉求是：

  • js的处理：转换 ES6 代码，解决浏览器兼容问题
  • css的处理：编译css，自动添加前缀，抽取css到独立文件
  • html的处理：复制并压缩html文件
  • dist的清理：打包前清理源目录文件
  • assets的处理：静态资源处理
  • server的启用：development 模式下启动服务器并实时刷新

转换 ES6 代码，解决浏览器兼容问题

用 babel 转换 ES6 代码

用 babel 转换 ES6 代码需要使用到 babel-loader ，我们需要安装一系列的依赖：

    npm i babel-core babel-loader babel-preset-env --save-dev

然后在根目录新建一个babel配置文件 .babelrc：

    {
        "presets": [
            "env"
        ]
    }

那么如何将配置用于webpack打包中？

  • 新建一个 webpack 的配置文件
  • 在 npm scripts 中使用 --module-bind
  1. 使用 webpack 的配置文件的方法：

    新建 webpack.config.js：

        module.exports = {
      module: {
        rules: [
          {
            test: /\.js$/,
            exclude: /node_modules/,
            use: {
              loader: "babel-loader"
            }
          }
        ]
      }
    }
  2. 在 npm scripts 中配置的方法：
    "scripts": {
      "dev": "webpack --mode development --module-bind js=babel-loader",
      "build": "webpack --mode production --module-bind js=babel-loader"
    }

使用 babel-polyfill 解决兼容性问题

然而浏览器依然不支持一些语法的使用，导致兼容性问题，我们用 babel-polyfill 解决：

    npm i babel-polyfill babel-plugin-transform-runtime  --save-dev

.babelrc 添加配置：

{
    "presets": [
        "env"
    ],
    "plugins": [
       "transform-runtime"
    ]
}

最后在 webpack.config.js 中将 babel-polyfill 加到你的 entry 数组中：

const path = require(‘path‘);
module.exports = {
    entry: [
        "babel-polyfill",
        path.join(__dirname, ‘./src/index.js‘)
    ],
    // ...
};

编译css，自动添加前缀，抽取css到独立文件

webpack 并不会主动将你的css代码提取到一个文件，过去我们使用 extract-text-webpack-plugin，在webpack4中我们使用mini-css-extract-plugin来解决这个问题。

postcss-loader 用于添加浏览器前缀，相关配置我喜欢在根目录新建 postcss.config.js 配置

    npm i mini-css-extract-plugin css-loader --save-dev
    npm i style-loader postcss-loader  --save-dev

    // webpack.config.js
    const MiniCssExtractPlugin = require("mini-css-extract-plugin");
    module.exports = (env, argv) => {
      const devMode = argv.mode !== ‘production‘
      return {
        module: {
          rules: [
            // ...,
            {
                test: /\.css$/,
                use: [
                    devMode ? ‘style-loader‘ : MiniCssExtractPlugin.loader,
                    ‘css-loader‘,
                    ‘postcss-loader‘
                ]
            },
            ]
          },
          plugins: [
            // ...,
            new MiniCssExtractPlugin({
              filename: "[name].css",
              chunkFilename: "[id].css"
            })
          ]
      }
    }

// postcss.config.js
    module.exports = {
        plugins: {
            autoprefixer: {}
        }
    }

复制并压缩html文件 html-webpack-plugin

    npm i html-webpack-plugin html-loader --save-dev

    // webpack.config.js
    const HtmlWebPackPlugin = require("html-webpack-plugin");
    module.exports = {
        module: {
            rules: [
                // ...,
                {
                    test: /\.html$/,
                    use: [{
                        loader: "html-loader",
                        options: {
                            minimize: true
                        }
                    }]
                }
            ]
        },
        plugins: [
            new HtmlWebPackPlugin({
                template: "./src/index.html",
                filename: "./index.html"
            })
        ]
    };

打包前清理源目录文件 clean-webpack-plugin

每次打包，都会生成项目的静态资源，随着某些文件的增删，我们的 dist 目录下可能产生一些不再使用的静态资源，webpack并不会自动判断哪些是需要的资源，为了不让这些旧文件也部署到生产环境上占用空间，所以在 webpack 打包前最好能清理 dist 目录。

    npm install clean-webpack-plugin --save-dev

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

静态资源处理 file-loader

    npm install file-loader --save-dev

    // webpack.config.js
    module.exports = {
      module: {
        rules: [
          {
            test: /\.(png|jpg|gif)$/,
            use: [
              {
                loader: ‘file-loader‘,
                options: {}
              }
            ]
          }
        ]
      }
    }

development 模式下启动服务器并实时刷新 webpack-dev-server

    npm i webpack-dev-server --save-dev

package.json

    "scripts": {
      "start": "webpack-dev-server --mode development --open",
      "build": "webpack --mode production"
    }

使用 webpack 4 建立 react 项目

现在我们模仿 create-react-app 的结构，自己搭建一个 react 项目，并且用less预编译：

  ├── public
  │   └── index.html      # html 模板
  ├── src
  │   ├── assets          # 静态资源
  │   │   └── logo.png
  │   ├── components      # 组件
  │   │   └── App.js
  │   ├── index.js        # 入口文件
  │   └── styles
  │       └── index.less
  ├── .babelrc
  ├── package-lock.json
  ├── package.json
  ├── postcss.config.js
  └── webpack.config.js

在以上的基础（项目搭建部分），再安装react相关模块及less模块：

    npm i react react-dom --save
    npm i babel-preset-react --save-dev
    npm i less less-loader --save-dev

修改 .babelrc:

    {
      "presets": ["env", "react"]
    }

修改 webpack.config.js ：

    // webpack.config.js
    const path = require(‘path‘);
    module.exports = (env, argv) => {
        const devMode = argv.mode !== ‘production‘
        return {
            entry: [
                "babel-polyfill",
                path.join(__dirname, ‘./src/index.js‘)
            ],
            devServer: {
                port: 3000, //端口号
            },
            module: {
                rules: [
                    // ...
                    // 处理react
                    {
                        test: /\.(js|jsx)$/,
                        exclude: /node_modules/,
                        use: {
                            loader: "babel-loader"
                        }
                    },
                    // 处理less
                    {
                        test: /\.less$/,
                        use: [
                            devMode ? ‘style-loader‘ : MiniCssExtractPlugin.loader,
                            ‘css-loader‘,
                            ‘postcss-loader‘,
                            ‘less-loader‘,
                        ]
                    }
                ]
            }
        }
    };

基本上搭建完这个项目了，如果你想看完整代码

使用 webpack 4 建立 vue 项目

同样地，我们模仿 vue-cli 的结构，自己搭建一个 vue 项目，这次我们的css预编译语言用 scss：

  ├── public
  │   └── index.html      # html 模板
  ├── src
  │   ├── assets          # 静态资源
  │   │   └── logo.png
  │   ├── components      # 组件
  │   │   └── App.vue
  │   ├── main.js        # 入口文件
  │   ├── main.js        # 入口文件
  │   └── styles
  │       └── index.scss
  ├── .babelrc
  ├── package-lock.json
  ├── package.json
  ├── postcss.config.js
  └── webpack.config.js

在以上的基础（项目搭建部分），再安装vue相关模块及sass模块：

    npm i vue --save
    npm i vue-loader vue-template-compiler --save-dev
    npm i node-sass sass-loader --save-dev

    // webpack.config.js
    const path = require(‘path‘);
    const VueLoaderPlugin = require(‘vue-loader/lib/plugin‘)

    module.exports = (env, argv) => {
        const devMode = argv.mode !== ‘production‘
        return {
            entry: [
                "babel-polyfill",
                path.join(__dirname, ‘./src/main.js‘)
            ],
            module: {
                rules: [
                    // ...
                    // 解析vue
                    {
                        test: /\.vue$/,
                        loader: ‘vue-loader‘,
                        options: {
                            loaders: {}
                        }
                    },
                    // 处理scss
                    {
                        test: /\.scss$/,
                        use: [
                            devMode ? ‘style-loader‘ : MiniCssExtractPlugin.loader,
                            ‘css-loader‘,
                            ‘postcss-loader‘,
                            ‘sass-loader‘,
                        ]
                    }
                ]
            },
            plugins: [
                // ...
                new VueLoaderPlugin()
            ]
        }
    };

一个简易的 vue-cli 也搭建完成，如果你想看完整代码

参考资源

原文地址：https://www.cnblogs.com/kkdn/p/9270591.html

时间： 2024-11-06 07:34:48

webpack 4 ：从0配置到项目搭建的相关文章

Flutter之环境配置与项目搭建

Flutter之环境配置与项目搭建 一,介绍 1.1,Dart Dart 是一种 易于学习. 易于扩展.并且可以部署到 任何地方 的 应用 编程 语言.并且同时借鉴了Java和JavaScript.Dart在静态语法方面和Java非常相似,如类型定义.函数声明.泛型等,而在动态特性方面又和JavaScript很像,如函数式特性.异步支持等. 1.2,Flutter Flutter 是 Google推出并开源的移动应用开发框架,主打跨平台.高保真.高性能.开发者可以通过 Dart语言开发 App,

spring5.0源码项目搭建

一.准备相应环境以及下载spring项目 Ps:此处只讲解安装gradle 1.JDK安装 2.Idea安装 3.gradle安装 Gradle下载路径:https://services.gradle.org/distributions/ Gradel配置环境变量: a.将下载的gradle解压到本地,取出本地的全路径 b.新建环境变量GRADLE_HOME,值为Gradle的解压位置 c.配置path路径如下:%GRADLE_HOME%\bin d.win+r输入cmd进入dos界面,键入命令

windows下Qt5.1.0配置android环境搭建 good

1.首先下载好需要配置的软件: 1>Qt 5.1.0 for Android (Windows 32-bit, 716 MB)(Info)下载地址: http://qt-project.org/downloads 2>android SDK tools (只下载tools即可)下载地址:http://developer.android.com/sdk/index.html android SDK 离线安装包(已是最新sdk 2013/7/26)下载地址:http://www.wuleba.co

Spring mvc+ maven + MyBatis + Oracle + IDEA 项目搭建 - framework 进阶中（一）

原文链接 http://blog.csdn.net/qq184377902/article/details/51493642 结合自身情况加以修改搭建的框架,记录以防备忘,方便日后学习参考. Before building the project framework  ... 项目环境 IntelliJ IDEA 2016.1.2.JDK 1.8.0_31.Apache-maven-3.5.0.Tomcat-9.0.0.M11 Maven项目搭建 自行百度 .. Build project fr

Vue.js系列之项目搭建（vue2.0 + vue-cli + webpack ）

1.安装node node.js环境(npm包管理器) cnpm npm的淘宝镜像 从node.js官网下载并安装node,安装过程很简单,一路"下一步"就可以了(傻瓜式安装).安装完成之后,打开命令行工具,输入 node -v,如果出现相应的版本号,则说明安装成功. npm包管理器,是集成在node中的,所以,直接输入 npm -v就会显示出npm的版本信息. 2.安装cnpm 在命令行中输入 npm install -g cnpm --registry=http://registr

vue项目搭建和开发流程 vue项目配置ElementUI、jQuery和Bootstrap环境

目录 一.VUE项目的搭建 1. 环境搭建 2. 项目的创建和启动 二. 开发项目 1. 配置vue项目启动功能 2. 开发vue项目 (1)项目文件的作用 (2)vue项目开发流程 (3)vue项目的请求生命周期 三.vue项目中的功能 1. 路由相关的标签和方法 2. 路由配置 (1)无路由传参的路由配置方法 (2)路由传参的路由配置方法 3. 页面的跳转功能 (1)标签跳转 (2)逻辑跳转(路由跳转) 四.JS原型 五.vue组件生命周期钩子 六.vue的ajax插件:axios 七.vu

项目搭建系列之二：SpringMVC框架下配置MyBatis

1.什么是MyBatis? MyBatis是一个支持普通SQL查询,存储过程和高级映射的优秀持久层框架.MyBatis消除了几乎所有的JDBC代码和参数的手工设置以及对结果集的检索封装.MyBatis可以使用简单的XML或注解用于配置和原始映射,将接口和Java的POJO(Plain Old Java Objects,普通的Java对象)映射成数据库中的记录. 回到目录 2.环境准备 搭建好SpringMVC框架,可以阅读<项目搭建系列之一:使用Maven搭建SpringMVC项目>,也可以直

spring-boot 2.0 多模块化项目和EurekaServer的搭建

Spring boot由于其 1.易于开发和维护.2.单个微服务启动快.3.局部修改部署容易.4.技术栈不受语言限制等优点受到越来越多公司的重视.spring-boot还集成了许多关于微服务开发的框架(例如配置管理,服务发现,断路器,智能路由,微代理,控制总线,一次性令牌,全局锁,领导选举,分布式 会话,群集状态),使我们部署微服务免去了繁琐的配置. 下面我们来学习利用spring-boot搭建电商项目. Spring Boot 2.0.0-SNAPSHOT 要求 Java 8 和 Spring

从零开始搭建自己的前后端分离【 .NET Core2.0 Api + Vue 2.0 】框架之二 || 后端项目搭建

WHY 至于为什么要搭建.Net Core 平台,这个网上的解释以及铺天盖地,想了想,还是感觉重要的一点,跨平台,嗯!没错,而且比.Net 更容易搭建,速度也更快,所有的包均有Nuget提供,不再像以前的单纯引入组件,比如是这样的: 已经没有了之前的Assemblies和COM的引入,初次使用感觉会很别扭,不过使用多了,发现还是很方便的,所以你一定要会使用Nuget,真的很强大,这点儿设计思路感觉更像Linux了. HOW 说了从零开始,就得从零开始,老生常谈,开始. 当然,前提是你得安装.Ne