webpack 4.x.x 搭建项目完整详解步骤

时间  2019-11-07
标签 webpack 4.x.x 搭建 项目 完整 详解 步骤 繁體版
原文   原文链接

前言

本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序须要的每一个模块，而后将全部这些模块打包成一个或多个 bundle。javascript

从 webpack v4.0.0 开始，能够不用引入一个配置文件。然而，webpack 仍然仍是高度可配置的。在开始前你须要先理解四个核心概念：css

  • 入口(entry)
  • 输出(output)
  • loader
  • 插件(plugins)

本文档旨在给出webpack的入门使用。html

1、新建项目webpack1.0.0，初始化package.json文件

输入命令java

mkdir webpack1.0.0   // 第一步建立项目webpack1.0.0
cd ./webpack1.0.0    // 进入项目路径   
npm  init            // 初始化package.json 文件
复制代码

2、项目安装webpack webpack-cli webpack-dev-server插件，为webpack项目提供相应的安装包。

输入命令：node

npm install webpack webpack-cli webpack-dev-server
复制代码

命令完成后，咱们会发现项目中多了一个 node_modules 文件夹，该文件夹是用来存放项目中安装的依赖包，无需画较大的精力关注，有深刻学习的同窗能够在后期慢慢深刻了解如何构建一个npm安装包，本文不做介绍。react

3、完整项目目录及项目文件

3.1为项目建立三个文件夹（config --配置文件夹 dist --编译文件夹 src --项目正文文件夹）webpack

输入命令：css3

mkdir config dist src
复制代码

如图增长了三个文件夹：web

3.二、建立项目入口html、js文件npm

输入命令：

touch dist/index.html src/index.js
//该命令window系统不支持，请手动建立
复制代码

4、执行webpack 打包命令。

4.1 在package.json -> scripts 栏目 配置build的运行命令。配置如图所示

配置完成后运行命令：

npm run  build
复制代码

执行命令后你们会发现，你们会发现dist文件夹下多了个main.js，命令运行时，npm取出build对应配置的命令在node环境中执行，webpack打包默认入口为src/index.js, 默认打包模式为 --model development， 打包模式总共有两种：

  • --model development（开发环境）
  • --model production（生产环境）

生成环境的命令配置如图：

配置完成后运行命令：

npm run  build:prod
复制代码

命令执行后结果如上述一致，黄色的警告提示消失了，打包的文件会更小。

以上操做完成后webpack的初步打包过程就有所了解啦，可是真实项目中webpack怎么可能这么简单的使用，接下来咱们要讲讲webpack的重点了，从以上的结果咱们不难发现webpack有编码打包编译的功能，可是要在大型项目中运用自如咱们就要掌握webpack的打包配置文件书写了，下面来一一介绍webpack的配置文件具体内容。

5、webpack 配置文件结构介绍

5.1 webpack打包配置文件介绍及启用

从 webpack v4.0.0 开始，能够不用引入一个配置文件。然而，webpack 仍然仍是高度可配置的。在开始前你须要先理解四个核心概念：

  • 入口 ------ (entry) 打包文件的入口（对应上述默认入口src/index.js），支持多入口
  • 输出 ------ (output) 打包压缩文件后的输出位置
  • 加载器 ---- (loader) 针对对应文件进行转义，解析 成浏览器识别的文件
  • 插件 ------ (plugins) 插件目的在于解决 loader 没法实现的其余事。

讲了概念事后，接下来咱们建立一个webpack.dev.js, 作一个简单的配置解析。

touch config/webpack.dev.js
//该命令window系统不支持，请手动建立
复制代码

配置文件类容，及配置介绍

const HtmlWebpackPlugin = require('html-webpack-plugin'); //经过 npm 安装
const path = require('path');        //node内置path模块，该模块主要集成文件系统路径操做API

const config = {
    mode: 'development',        //webpack打包的模式，上述命令里有介绍，也能够在本配置中配置
    entry: {    //js的入口文件，支持多入口 注释①
        main: path.resolve(__dirname,'../src/index.js')
    },
    output: {   //js打包压缩后的出口文件，多入口时对应的配置应作相对变化 注释②
        path: path.resolve(__dirname,'../dist'),
        filename:'bundle.js'
    },
    module: {
        rules: [] // 配置loder使用的规则、做用范围、控制输出的名称、位置等；主要做用是编译，解析文件； 暂时不使用loader
    },
    plugins: [
        new HtmlWebpackPlugin({template: './src/index.html'})  //根据项目提供HTML模板，生成新页面，并将对应的输出打包压缩输出的js，连接到页面中；详细配置见注释④
    ]
};

module.exports = config;
复制代码

下面对代码的注释出作一个详细介绍的连接导向（建议在本文彻底看完后、再去作详细深刻了解）：

打包入口详解-注释①

打包输出详解-注释②

HTML模板插件详解-注释④

下面咱们把上述 一 ~ 三节完成的项目里的项目内容进行下调整，咱们把dist中文件清空，并在src文件夹中添加 index.html 模板HTML，完成后文件目录如图：

接下来，咱们使用 npm install html-webpack-plugin 将项目中使用的未安装的包安装了。剩下的操做是咱们从新配置下webpack打包的命令，第三节咱们有介绍在package.json 文件中配置运行命令；下面咱们贴出package.json代码：

{
  "name": "webpack-1.0",
  "version": "1.0.0",
  "description": "webpacke基础训练",
  "author": "张啸",
  "license": "ISC",
  "main": "index.js",
  "scripts": {  //npm run 运行的命令配置
    "build": "webpack --config config/webpack.dev.js"  //打包命令的配置 --config表示以何种文件配置方式启动项目打包
  },
  "dependencies": {   //项目所须要的第三方安装包
    "webpack": "^4.29.6",
    "webpack-cli": "^3.2.3",
    "webpack-dev-server": "^3.2.1"
  }
}
复制代码

命令行运行下面命令：

npm run build
复制代码

运行事后的结果如图所示：

打包后生成了index.html 而且引入了output中的打包压缩后的JS文件。综合上述一个简单的项目打包就完成了，可是你们有没有发现，这些只是打包了，并不适合在开发的过程当中使用，那在开发的时候咱们更想直接去流浪器查看开发项目的直接页面。这时候咱们就要用到webpack-dev-server插件了，这个插件是干吗的呢？

5.2 webpack-dev-server 启动服务及命令参数

webpack-dev-server的做用是打包项目后，并启动一个服务，能够直接在浏览器查看项目页面。 具体配置以下，webpack.dev.js添加devserver修改下：

const HtmlWebpackPlugin = require('html-webpack-plugin'); //经过 npm 安装
const path = require('path');        //node内置path模块，该模块主要集成文件系统路径操做API

const config = {
    mode: 'development',        //webpack打包的模式，上述命令里有介绍，也能够在本配置中配置
    entry: {    //js的入口文件，支持多入口 注释①
        main: path.resolve(__dirname,'../src/index.js')
    },
    output: {   //js打包压缩后的出口文件，多入口时对应的配置应作相对变化 注释②
        path: path.resolve(__dirname,'../dist'),
        filename:'bundle.js'
    },
    module: {
        rules: [] // 配置loder使用的规则、做用范围、控制输出的名称、位置等；主要做用是编译，解析文件； 暂时不使用loader
    },
    plugins: [
        new HtmlWebpackPlugin({template: './src/index.html'})  //根据项目提供HTML模板，生成新页面，并将对应的输出打包压缩输出的js，连接到页面中；详细配置见注释④
    ],
    devServer: {        //webpack-dev-server配置（仅开发环境须要）
		contentBase: path.join(__dirname, './dist'), //编译打包文件的位置
		publicPath: '/',    
		port: 8080,                 //服务器端口号
		host: '0.0.0.0',
		proxy: {},                  //代理列表
		compress: true,
		historyApiFallback: true,   //开启服务器history重定向模式
	}
};
module.exports = config;
复制代码

package.json 文件添加开发启动命令，以下：

{
  "name": "webpack-1.0",
  "version": "1.0.0",
  "description": "webpacke基础训练",
  "main": "index.js",
  "scripts": {
    "build": "webpack --config config/webpack.dev.js",
    "dev" : "webpack-dev-server --config config/webpack.dev.js --color --progress --hot" // --color 启用彩色打印 --progerss 启用进程监测 --hot 启用热加载
  },
  "author": "张啸",
  "license": "ISC",
  "dependencies": {
    "babel-loader": "^8.0.5",
    "html-webpack-plugin": "^3.2.0",
    "webpack": "^4.29.6",
    "webpack-cli": "^3.2.3",
    "webpack-dev-server": "^3.2.1"
  }
}

复制代码

如上咱们有添加了webpack-dev-server 命令，下面咱们启动项目查看结果：

npm run dev
复制代码

打开页面http://localhost:8080/查看结果如图

以上是一个简单webpack全过程运用的例子了，下面我给你们推荐一些webpack经常使用的一些loader、plugins的使用。

6、webpack项目中经常使用loader，以及配置。

6.1 JavaScript方面的所运用的loader

  • "babel-core" //JavaScript编译核心babel-core（必须）
  • "babel-loader" //JavaScript编译babel-loader（必须）
  • "babel-plugin-transform-runtime" //JavaScript 运行环境转换器
  • "babel-preset-stage-0" //ES6,ES7语法转换ES5编译器（ES7的提案，且包含了stage-2，stage-1全部功能）
  • "babel-polyfill" //IE低版本扩展JS某些API（如promise object.defindproperty）（根据项目需求是否兼容IE低版本安装）
  • "babel-runtime" //提供将ES6转变成ES5运行环境,并不污染全局完成代码填充
  • "babel-plugin-transform-decorators-legacy" //JavaScript 装饰器语法编译器（使用@语法需添加）
  • "babel-plugin-transform-react-jsx" //react jsx语法转换器
  • "babel-plugin-react-html-attrs" //react dom属性识别语法转换器
  • "babel-preset-react" //react语法编译器 以上都是babel loader 相关的loader包，固然项目使用babel-loader前，还须要配置一个babel配置，通知babel-loader在使用时对应的语法文件采用何种方式去处理。该配置文件名称为 .babelrc; babelrc配置以下：
{
    "presets": [
        "env",
        "react",
        "stage-0"
    ],
    "plugins": [
        "transform-decorators-legacy",
        "transform-react-jsx",
        [
            "transform-runtime",
            {
                "helpers": false,
                "polyfill": false,
                "regenerator": true,
                "moduleName": "babel-runtime"
            }
        ],
        "react-html-attrs"
    ]
}
复制代码

在 webpack.dev.js -> module.rules 选项添加loader规则； 添加配置以下：

module: {
    rules: [{
      test: /\.js$/,
      loader: "babel-loader",
      options: {
        cacheDirectory: false,
        babelrc: true
      },
      exclude: path.resolve(__dirname, 'node_modules/'),
    }]
}
复制代码

babelrc配置详情可见官网

6.2 CSS方面的所运用的loader

  • "style-loader" //样式loader（必须）
  • "css-loader" //css-loader （必须）
  • "autoprefixer" //css3自动补全功能
  • "postcss-cssnext" //利用cssnext 额外增长的一些 css 规范,
  • "postcss-loader"
  • "less": //如下都是使用less相关语法加载库
  • "less-loader"
  • "node-sass": "^4.5.3", //如下都是使用sass，scss相关语法加载库
  • "sass-loader": "^6.0.6",

一样用到postcss-loader的话依然须要有配置告诉loader以何种方式编译css。配置文件postcss.config.js以下：

module.exports = {
    plugins: {
        'postcss-cssnext': {},
    }
};
复制代码

postcss配置详情可见官网

在 webpack.dev.js -> module.rules 选项添加loader规则； 添加配置以下：

module: {
    rules: [{
			test: /\.css$/,
			use: [{
					loader: 'style-loader',
					options: { sourceMap: false }
				}, {
					loader: 'css-loader',
					options: { sourceMap: false}
				}, 'postcss-loader',
			]
	},{
      test: /\.less$/,
      use: [
        {loader: 'style-loader', options: {sourceMap: false}},
        {loader: 'css-loader', options: {sourceMap: false}},
        {loader: 'postcss-loader', options: {sourceMap: false}},
        {loader: 'less-loader', options: {sourceMap: false}}
      ]
    }, {
      test: /\.(scss|sass)$/,
      use: [
        {loader: 'style-loader', options: {sourceMap: false}},
        {loader: 'css-loader', options: {sourceMap: false}},
        {loader: 'postcss-loader', options: {sourceMap: false}},
        {loader: 'sass-loader', options: {sourceMap: false}}
      ]
    }]
}
复制代码

6.3 资源文件加载的所运用的loader

  • "file-loader" 文件处理loader
  • "url-loader" url连接处理loader

在 webpack.dev.js -> module.rules 选项添加loader规则； 添加配置以下：

module: {
    rules: [{
      test: /\.(png|jpg|gif|ico|jpeg|bmp|swf)$/,
      exclude: path.resolve(__dirname, 'node_modules/'),
      use: [{
        loader: 'url-loader',
        options: {
          limit: 10000,
          name(file) { //图片超过 10000 Kb处理
            return file.replace(/.*assets(\/|\\)/, '').replace(/\\/g, '/')
          }
        }
      }]
    }, {
      test: /\.(woff|woff2|svg|eot|ttf|otf)$/,
      exclude: path.resolve(__dirname, 'node_modules/'),
      use: [{
        loader: 'file-loader',
        options: {
          limit: 10000,
          name: 'fonts/[name].[ext]'
        }
      }]
    }]
}
复制代码

webpack的loader种类和用途十分繁多，这里列举了几个经常使用loader，有兴趣的同窗能够去官网查看，本文只适合webpack入门新手查阅

7、webpack项目中经常使用plugins，以及配置。

7.1 经常使用插件

  • HtmlWebpackPlugin 模板生成HTML并连接入口js插件
  • inline-manifest-webpack-plugin manifest 缓存配置插件
  • copy-webpack-plugin 文件拷贝插件
  • dotenv-webpack 环境变量载入插件
  • webpack-parallel-uglify-plugin js压缩插件
  • optimize-css-assets-webpack-plugin css提取插件
  • mini-css-extract-plugin css压缩插件

在 webpack.dev.js -> plugins 选项添加插件使用规则； 添加个别插件配置以下：

plugins: [
	new webpack.DefinePlugin({  //环境变量装配
		'process.env': {
			NODE_ENV: JSON.stringify(process.env.NODE_ENV || 'development'),
			NODE_APIENV: JSON.stringify(process.env.NODE_APIENV || 'development'),
			WITH_TRACKER:process.env.WITH_TRACKER
		},
	}),
	new CopyWebpackPlugin([{    //文件拷贝
		from: path.resolve(__dirname, '../static'),
		to: path.posix.join('static'),
		ignore: ['.*']
	}, {
		from: path.resolve(__dirname, '../app/assets/javascripts'),
		to: path.posix.join('javascripts'),
		ignore: ['.*']
	}]),
]
复制代码

这里就不一一介绍各个插件的使用规则及配置参数了，你们能够根据插件官网进行翻阅

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程