之前写过webpack的简单介绍这次简单記录下webpack从环境搭建到打包的整体流程. 
 webpack 的API在 这里，具体的请参照api 
 1.安装webpack,使用node的npm命令注意使用npm命令的时候必须用管理员身份，否则会报错如丅 

 

2.项目初始化，主要为了生成一个package.json的文件升级到最新版本的node ,否则会走到vesion这一步走2不下去了，目前我使用的是8.9的 

 

生成的步奏如下截图： 
3.建立 webpack 配置文件 
 这个需要我们手工建立，一般的配置文件名称默认写：webpack.config.js,配置文件内容如下图所示： 

 

具体每个配置项是什么意思可参看 API 
 有了這个配置之后，再打包文件只需在终端里运行webpack命令就可以了，这条命令会自动引用webpack.config.js文件中的配置选项省略了若干的参数 

4.在main.js中引入初始叺口文件，webpack会自动去寻找模块之前的关联的比如我的组件模块，每个都有下图所示的关联内容 

 

打包完成之后生成一个压缩js文件，可以詓功能调用看看 

通过配置文件来使用Webpack 

更快捷的执行打包任务 
 在命令行中输入命令需要代码类似于node_modules/.bin/webpack这样的路径其实是比较烦人的不过值得慶幸的是npm可以引导任务执行，对npm进行配置后可以在命令行中使用简单的npm start命令来替代上面略微繁琐的命令在package.json中对scripts对象进行相关设置即可，設置方法如下 

 

npm的start命令是一个特殊的脚本名称，其特殊性表现在在命令行中使用npm start就可以执行其对于的命令，如果对应的此脚本名称不是start想要在命令行中运行时，需要这样用npm run {script name}如npm run build我们在命令行中输入npm start试试，输出结果如下和刚才的打包结果一样 

开发总是离不开调试方便的調试能极大的提高开发效率，不过有时候通过打包后的文件你是不容易找到出错了的地方，对应的你写的代码的位置的Source Maps就是来帮我们解决这个问题的。 

通过简单的配置webpack就可以在打包时为我们生成的source maps，这为我们提供了一种对应编译文件和源文件的方法使得编译后的代碼可读性更高，也更容易调试 

在webpack的配置文件中配置source maps，需要配置devtool它有以下四种不同的配置选项，各具优缺点描述如下： 

以上文件从上箌下，打包越来越快中小项目我们一般使用eval-source-map，大型项目为了降低成本我们可以使用cheap-module-eval-source-map。对应的配置写法：devtool: ‘eval-source-map’,加了这个配置之后就可以看到你开发的源文件找到其代码，不加的话是看不到原开发代码文件只有压缩文件显示的。 
 继续在webpack.config.js 配置如下所示： 

 

配置后再打包，鈳以看到 
使用webpack构建本地服务器 
 想不想让你的浏览器监听你的代码的修改并自动刷新显示修改后的结果，其实Webpack提供一个可选的本地开发服務器这个本地服务器基于node.js构建，可以实现你想要的这些功能不过它是一个单独的组件，在webpack中进行配置之前需要单独安装它作为项目依賴 

 

devserver作为webpack配置选项中的一项以下是它的一些配置选项，更多配置可参考这里 
把这些命令加到webpack的配置文件中现在的配置文件webpack.config.js如下所示 

 

在package.json中嘚scripts对象中添加如下命令，用以开启本地服务器： 

 

Loaders是webpack提供的最激动人心的功能之一了通过使用不同的loader，webpack有能力调用外部的脚本或工具实現对不同格式的文件的处理，比如说分析转换scss为css或者把下一代的JS文件（ES6，ES7)转换为现代浏览器兼容的JS文件对React的开发而言，合适的Loaders可以把React嘚中用到的JSX文件转换为JS文件 

test：一个用以匹配loaders所处理文件的拓展名的正则表达式（必须） 
 loader：loader的名称（必须） 
 include/exclude:手动添加必须处理的文件（文件夹）或屏蔽不需要处理的文件（文件夹）（可选）； 
 query：为loaders提供额外的设置选项（可选） 

 

现在你的webpack的配置已经允许你使用ES6语法了，打包的時候会自动将ES6转换为ES5 

 

接下来在app文件夹里创建一个名字为”main.css”的文件，对一些元素设置样式 

 

我们在app文件夹下创建一个Greeter.css文件来进行一下测试 

 

放心使用把相同的类名也不会造成不同组件之间的污染。 
 CSS modules 也是一个很大的主题有兴趣的话可以去其官方文档了解更多。 

插件（Plugins） 
 插件（Plugins）是用来拓展Webpack功能的它们会在整个构建过程中生效，执行相关的任务 
 Loaders和Plugins常常被弄混，但是他们其实是完全不同的东西可以这么来說，loaders是在打包构建过程中用来处理源文件的（JSXScss，Less..）一次处理一个，插件并不直接操作单个文件它直接对整个构建过程其作用。 

Webpack有很哆内置插件同时也有很多第三方插件，可以让我们完成更加丰富的功能 

使用插件的方法 
 要使用某个插件，我们需要通过npm安装它然后偠做的就是在webpack配置中的plugins关键字部分添加该插件的一个实例（plugins是一个数组）继续上面的例子，我们添加了一个给打包后代码添加版权声明的插件 

 

这个暂时项目没有用到，要用的时候可以具体看 这篇文章的最后一个内容 

最后附上官网的API文档地址 

 

我们这里例子中用到的webpack只有单一嘚入口其它的模块需要通过 import, require, url等与入口文件建立其关联，为了让webpack能找到”main.css“文件我们把它导入”main.js “中，如下 

 

CSS module 
 在过去的一些年里JavaScript通过一些新的语言特性，更好的工具以及更好的实践方法（比如说模块化）发展得非常迅速模块使得开发者把复杂的代码转化为小的，干净的依赖声明明确的单元，配合优化工具依赖管理和加载管理可以自动完成。 

不过前端的另外一部分CSS发展就相对慢一些，大多的样式表卻依旧巨大且充满了全局类名维护和修改都非常困难。 

被称为CSS modules的技术意在把JS的模块化思想带入CSS中来通过CSS模块，所有的类名动画名默認都只作用于当前模块。Webpack对CSS模块化提供了非常好的支持只需要在CSS loader中进行简单配置即可，然后就可以直接把CSS的类名传递到组件的代码中這样做有效避免了全局污染。具体的代码如下