还是和以前一样。可能会测试一些概念面试。我用*标记了它们。我将用两句话清楚地总结其余部分。如果你想了解webpack，就仔细看看吧，虽然这个教程不能让你把webpack玩的很好，但是了解其运行过程已经足够了。面试的时候一般都会问你webpack和Loader的原理。你使用什么优化措施？前端开发已经模块化，提高了代码库的封装性和结构性。打包工具已经成为项目中不可或缺的一部分，今天有几种可能的选择，例如webpack、grunt、gulp等。webpack由于其功能性和可扩展性在过去几年变得非常流行。但是webpack的配置总是让人摸不着头脑，今天我们就来一步步从一个空的配置文件到打包文件进行一次完整的搭建。这个概念不像大多数模块打包器，webpack把项目当成一个整体，通过给定一个主文件，webpack会从这个文件开始寻找你项目的所有依赖文件，使用加载器来处理它们，最后打包成一个ormorebrowser-recognizedjsfilesinstall首先添加我们要使用的包：npminstallwebpackwebpack-dev-server--save-devwebpack是我们需要的模块打包器，webpack-dev-server是用来创建本地服务器的，监控您的代码修改，并自动刷新修改结果。这些是devServercontentBase相关的配置，//为文件提供本地服务器端口，//监听端口，默认8080inline，//设置为true，源文件改变时自动刷新页面historyApiFallback//依赖HTML5historyAPI，如果设置为true，所有页面跳转指向index.htmldevServer:{contentBase:'./src'//本地服务器加载的页面所在目录historyApiFallback:true,//不跳转inline:true//real-timerefresh}然后我们在根目录下创建'webpack.config.js'，在'package.json'中添加两条命令用于本地开发和生产发布"scripts":{"start":"webpack-dev-server","build":"webpack"}使用webpack命令时，他会接受webpack配置文件，除非我们使用其他操作baseConfig={条目：'。/src/index.js'}当我们需要多个入口文件时，我们可以把入口写成一个对象varbaseConfig={entry:{main:'./src/index.js'}}我推荐使用后一种方式，因为它的规模会随着你项目的增长而变得笨重.js'},输出:{文件名:'main.js',路径:path.resolve('./build')}}module.exports=baseConfig如果定义了多个入口文件，那么我们需要使用占位符来保证输出文件的唯一性output:{filename:'[name].js',path:path.resolve('./build')}现在只需很少的配置，您就可以运行服务器并在本地使用命令npmstart或npmrunbuild来打包我们的代码以供发布。处理，比如scss转css，或者typescript转js2，将这些文件转成依赖图加载器是webpack最重要的部分之一，通过使用不同的Loader，我们可以调用外部脚本或者工具处理不同格式的文件。加载器需要在webpack.config.js中单独配置一个模块。配置如下：test：匹配处理文件扩展名的正则表达式（必填）loader：加载器名称（必填）include/exclude：手动添加要处理的文件，屏蔽不需要的文件processed(optional)query:为加载器提供额外的设置选项ex:varbaseConfig={//...module:{rules:[{test:/*regextomatchfileextensions*/,use:[loader:/*loadername*/,query:/*附加配置*/]}]}}加载器要工作，我们需要一个正则表达式来标识我们要修改的文件，然后有一个数组代表我们我们即将要用到的Loader，当然我们需要的loader需要通过npm来安装比如我们需要解析less个文件，webpack.config.js的配置如下：varbaseConfig={entry:{main:'./src/index.js'},output:{filename:'[name].js'，路径：path.resolve('./build')}，devServer：{contentBase：'./src'，historyApiFallBack：true，内联：true}，模块：{规则：[{test：/\.less$/，使用：[{loader:'style-loader'},{loader:'css-loader'},{loader:'less-loader'}],exclude:/node_modules/}]}}这里有几个常用的loader：babel-loader:let将下一代js文件转换成现代浏览器支持的js文件有点复杂，所以大多会新建一个.js文件。说明@import,url()如果需要解析less，添加一个less-loaderfile-loader：生成的文件名是文件内容的MD5哈希值，会保留引用资源的原始扩展名url-loader：functionfile-loader类似，但是当文件大小小于指定的限制时，它可以返回一个DataURL实际上，当使用less，scss，stylus等时，npm会提示你缺少什么插件，你可以只安装Pluginsplugins很容易和loader混淆。所有外部参考之间有什么区别？其实它们是两种完全不同的东西。所以加载器负责处理css、jsx等源文件，一次处理一个文件。插件不直接操作单个文件，它们直接影响整个构建过程。下面列出一些常用的插件及其用法。ExtractTextWebpackPlugin：会将词条中引用的css文件打包成独立的css文件，而不是嵌入到js包文件中。这是他的应用程序varExtractTextPlugin=require('extract-text-webpack-plugin')varlessRules={use:[{loader:'css-loader'},{loader:'less-loader'}]}varbaseConfig={//...模块：{规则：[//...{测试：/\.less$/，使用：ExtractTextPlugin.extract(lessRules)}]}，插件：[newExtractTextPlugin('main.css')]}HtmlWebpackPlugin:功能：基于一个简单的index.html模板，生成一个新的index.html，自动引用你打包好的js文件varHTMLWebpackPlugin=require('html-webpack-plugin')varbaseConfig={//...plugins:[newHTMLWebpackPlugin()]}HotModuleReplacementPlugin:它允许你在修改组件代码时自动刷新修改结果的实时预览注意HMR永远不要在生产环境中使用。这里说一下大致情况，分为开发环境、测试环境、生产环境。使用方法如newwebpack.HotModuleReplacementPlugin()webapck.config.js的全部内容constwebpack=require("webpack")constHtmlWebpackPlugin=require("html-webpack-plugin")varExtractTextPlugin=require('extract-text-webpack-plugin')varlessRules={use:[{loader:'css-loader'},{loader:'less-loader'}]}module.exports={entry:{main:'./src/index.js'},output:{filename:'[name].js',path:path.resolve('./build')},devServer:{contentBase:'/src',historyApiFallback:true,inline:true,hot:true},模块:{规则:[{test:/\.less$/,使用:ExtractTextPlugin.extract(lessRules)}]},plugins:[newExtractTextPlugin('main.css')]}产品阶段的构建至此，我们基本完成了开发阶段的事情，但是在生产阶段，还需要处理其他资源，比如压缩，优化，缓存，css和js的分离。首先让我们定义产品环境varENV=process.env.NODE_ENVvarbaseConfig={//...plugins:[newwebpack.DefinePlugin({'process.env.NODE_ENV':JSON.stringify(ENV)})]}然后我们还需要修改我们的脚本命令"scripts":{"start":"NODE_ENV=developmentwebpack-dev-server","build":"NODE_ENV=productionwebpack"}process.env.NODE_ENV将替换为string，它运行压缩器以排除那些无法访问的开发代码分支。当您引入不会投入生产的代码时，以下代码将非常有用。if(process.env.NODE_ENV==='development'){console.warn('这个警告会在生产阶段消失')}优化插件下面介绍几个优化代码的插件OccurenceOrderPlugin:AssignIDs到组件，通过这个插件webpack可以分析和优先使用最多的模块，然后为它们分配最小的IDUglifyJsPlugin:压缩代码下面是它们的使用方式()新的webpack.optimize。UglifyJsPlugin()}那么我们在使用npmrunbuild的时候，会发现代码被压缩了，总结一下webpack配置文件的复杂度，具体看你项目的需要。小心使用它们。因为随着项目的发展，它们会变得很难驯服。内容很多，其实总结起来也不过分，就Loader和plugins。其他一切都更简单。这篇文章花了我三天左右的时间，看了网上各种教程，再看了官网，真是累死了。写完这里我要睡觉了
