反应Webpack配置

什么是Webpack? 

简单来说,Webpack是静态模块捆绑器。这只是意味着,当您基于任何具有webpack支持的框架或库来构建或处理应用程序时,Webpack会展示其魔力,并在内部构建一个依赖关系图,该依赖关系图可映射项目所需的每个模块并生成一个或多个捆绑。 Webpack将以下任何文件视为依赖项 

任何时候一个文件都依赖于另一个文件。这使Webpack可以获取非代码资产,例如Web字体或图像,并将它们作为应用程序的依赖项提供。当Webpack开始捆绑您的应用程序时,它是从命令行或其配置文件中定义的模块列表开始的。 Webpack从这些入口点以递归方式构建了一个依赖关系图,其中包括应用程序需要的所有模块。依赖图准备好后,Webpack会对其进行洒水’的魔力,将所有这些模块捆绑成许多更小的捆绑-通常只有一个–由浏览器加载。 

反应Webpack配置 

Webpack中的配置是一个JS模块。我们可以将配置,加载器(稍后说明)以及各种特定信息放到 配置 文件。配置文件用于为运行它的计算机配置初始设置和其他参数。 Webpack配置允许我们设置第一个文件的输入路径 

Webpack配置文件的示例。 

webpack.config.js 

module.exports = { 
条目:'./src/index.js', 
module: { 
rules: [ 
{ 
测试: /\.(js|jsx)$/, 
exclude: /node_modules/, 
采用: ['babel-loader'] 
} 
] 
}, 
resolve: { 
extensions: [‘*’, ‘.js’, ‘.jsx’] 
}, 
输出:{ 
路径: __dirname + '/dist', 
publicPath: '/', 
文档名称:'bundle.js' 
}, 
devServer: { 
contentBase: './dist' 
} 
};

为什么要对webpack配置做出反应? 

配置用于用户应用程序,设置操作系统(如MacOS或Windows)或使用脚本(如Node等)来设置服务器。这允许按照用户或程序员的要求来设置系统。配置可以基于GUI(图形用户界面),也可以基于文本。 Webpack配置是基于文本的。通常,当应用程序启动时,它会读取配置文件并根据配置文件编译输出。因此,如果需要自定义输出,则应该了解其应用程序的配置。 

  • Webpack为JavaScript提供了一个模块系统(基于ES6标准)。 •Webpack具有良好的速度优势。 
  • 使基础架构更加灵活,随时可以扩展

了解您的Webpack配置 

在创建自己的Webpack配置之前,您必须了解一些术语及其在应用程序生产中的附加优势。基本上,有五个Webpack配置的主要或核心概念。 

  1. 条目:Webpack通过创建捆绑包并从每个单独的组件制作一个依赖关系图来工作。问题是,“它从哪里开始?”。这个问题的答案很简单。 Webpack开始从文件或文件的路径进行捆绑,如其 条目 属性。 

条目属性用作webpack开始捆绑的入口点,并根据 进口 其中使用的关键字。默认情况下,入口点是 ./src/index.js 但是我们可以指定自己的。 

例如: 

webpack.config.js 

module.exports = { 
条目:'./path/to/my/entry/file.js' 
}; 
  1. 输出量:在入口点和创建依赖关系图之后,webpack将在其中发出捆绑包,由output属性描述。默认情况下,输出路径为 ./dist/main.js, 哪里 main.js 是文件名, dist 是包含文件的目录.我们可以指定我们自己的目录和文件。 

例如: 

webpack.config.js 

const 路径 = require(‘path’); 

module.exports = {

条目:‘./path/to/my/entry/file.js’, 

输出:{ 

路径:path.resolve(__ dirname,‘dist’), 

文档名称:‘my-first-webpack.bundle.js’ 

} 

}; 

  1. 装载机: 加载程序允许webpack主要处理其他类型的文件 javascript 要么 JSON格式 并将文件转换为有效的模块。这些有效模块以后可以由应用程序使用,并添加到依赖关系图中。 

具体来说,它寻找单词 进口 在文件中。 

例如: 

webpack.config.js 

const 路径 = require('path'); 
module.exports = { 
输出:{ 
文档名称:'my-first-webpack.bundle.js' 
}, 
module: { 
rules: [ 
{ 测试: /\.txt$/, 采用: 'raw-loader' } 
] 
} 
}; 

哪里 测试 属性指示要转换的文件,并且 采用 属性指示用于此目的的加载程序。它告诉webpack,当它遇到带有扩展名的文件时 。文本文件 里面 导入或require() 语句,然后使用 原料装载机 在将文件添加到捆绑包之前先对其进行转换。 

  1. 外挂程式:插件可用于执行加载程序无法单独完成的任务。 捆绑优化,资产管理和环境变量注入等任务 可以使用插件来完成。要使用插件,您需要 要求() 并将其添加到 plugins数组。

例如: 

webpack.config.js 

const HtmlWebpackPlugin = require('html-webpack-plugin'); // extra plugin const webpack = require('webpack'); //to access built-in plugins 
module.exports = { 
module: { 
rules: [ 
{ 测试: /\.txt$/, 采用: 'raw-loader' } 
] 
}, 
plugins: [ 
new HtmlWebpackPlugin({template: './src/index.html'}) 
]}; 

在此示例中, html-webpack-plugin 通过自动注入所有生成的包,为应用程序生成HTML文件。 

从此处检查插件列表:https://webpack.js.org/plugins/ 

  1. 模式:这告诉webpack根据我们的模式启用优化 应用。应用程序的三种模式是 开发,生产 没有。 默认模式是 生产.

例如: 

webpack.config.js 

module.exports = { 

mode: 'production' 
}; 

创建Webpack配置 

现在,在了解了Webpack的属性和核心概念之后。现在该配置我们自己的webpack文件了。请按照以下步骤操作: 

  1. 确保 节点 npm Webpack仅在Node上运行,并且几乎支持所有浏览器,因此已安装在系统中。 
  2. 创建一个工作目录并从终端(在目录内)运行命令 npm 在里面 并按照步骤进行。 
  3. 现在运行命令 npm安装webpack–save-dev 添加webpack模块。
  4. 创造 webpack.config.js 在项目根目录中。 
  5. 在文件中添加以下行。 

module.exports = { 

条目:"./src/scripts/app.js", 
输出:{ 
文档名称:"./dist/app.bundle.js" 
} 
}; 
  1. 运行命令 npm开始. 这应该创建一个 app.bundle.js 里面的文件 dist 目录。入口是 app.js 文件位于 剧本 这是的子目录 src 目录。所有js代码都将捆绑在 app.bundle.js 文件。 
  2. 最后,我们可以手动创建HTML页面,也可以使用 html-webpack-plugin在此示例中,我们将手动创建一个HTML页面。我们现在要做的就是创建一个名为 index.html。编写简单的HTML标记并添加 <script src =’app.bundle.js’></script> 结束之前,它在body标签内排成一行。
  3. 现在打开浏览器并运行 index.html 文件。