webpack学习心得

webpack学习心得

 出于对webpack的好奇，决定要去学习门技术，提升自己。

什么是webpack？

webpack是德国开发者开发的模块加载器兼打包工具，在webpack中，它能把各种资源，例如js(含jsx)，coffee，样式（含less、sass），图片等都作为模块来使用和处理。因此，webpack当中js可以引用css,css中可以嵌入图片dataUrl。

为什么要用webpack？

webpack是前端一个工具，可以让各种模块进行加载，预处理，再进行打包，它能有gunt或gulp所有基本功能，优点如下：
    1.支持commonjs和AMD模块。
    2.支持很多模块加载器的调用，可以使模块灵活定制
    3.可以通过配置打包成多个文件，有效的利用浏览器的缓存功能提升性能

安装node.js

选择对应版本先下载一个node.js安装包。

下载完成后双击即可。
命令行输入node -v，回车输出nodejs版本号，表示安装成功。
命令行输入npm -v,回车输出npm版本号，表示安装成功(nodejs集成了npm)。
由于npm不稳定，下载速度慢，建议使用淘宝镜像：
`npm install -g cnpm --registry=https://registry.npm.taobao.org`,
命令行输入cnpm -v，回车输出cnpm版本号，表示安装成功。以后安装就使用cnpm命令。

安装webpack

1.命令行输入 `sudo cnpm install webpack -g`回车，全局安装webpack,命令行输入`webpack -v`回车,输出webpack版本号，表示安装成功。(mac系统下需要输入sudo提高权限，否则报错)。
2.cd进入到我们的项目中，我创建的项目为**********/webpack，在这个项目下创建配置项，命令行输入 `cnpm init`,一路回车。
这时我们的项目会多出一个package.json的文件

接下来，在项目下创建webpack的依赖项，命令行输入`cnpm install webpack --save-dev`。
再来看我们的项目多出一个node_modules文件且package.json多出一行文字

到这里，准备工作已经完成，我们可以使用webpack了。

开始webpack之旅

1.小试牛刀

开始之前，我们构建一下项目结构，如图：

main.js作为一个入口文件，用work.js来编写各种行为特效。
main.js中使用require来加载work.js。

在页面中写入一段话。

命令行输入`webpack app/main.js publice/dist/webpack.js`,回车。
意思是将根目录下的app/入口文件main.js生成新的js文件，把新生成的js放到对应路径下，命名为webpack.js
再看我们的项目，多出一个dist文件夹和一个webpack.js文件。

在index.html中引入webpack.js，执行看看效果。

OK,小试牛刀成功。

2.webpack之文件路径

上面小试牛刀，我们需要输入文件路径，当我们项目复杂了，写文件路径也很费劲，下面我们来解决这个问题。

 

 - 创建webpack.config.js
在项目根目录下创建一个文件叫webpack.config.js（必须是这个名字）,创建配置项

现在在命令行直接执行webpack就可以了。

webpack之loaders

1.loaders是干什么的？

loaders是webpack中最核心的功能。通过使用不同的loader,webpack通过调用外部的脚本或工具可以对各种各样的格式的文件进行处理，比如说分析json文件并把它转换成javascript文件，或者说把下一代的js文件（ES6,ES7）转换为现代浏览器可以识别的js文件。

2.loaders配置项

loaders需要单独安装并且需要webpack.config.js下的modules关键字下进行配置，loaders的配置选项包括以下几方面：
1)test:一个匹配loaders所处理的文件的拓展名的正则表达式（必须）
2)loader:loader的名称（必须）
3)include/exclude:手动添加必须处理的文件（文件夹）或屏蔽不需要处理的文件（文件夹）（可选）
4)query:为loaders提供额外的设置选项（可选）

3.如何使用loaders

• loaders之json-loader使用

  命令行输入cnpm install --save-dev json-loader安装json-loader,
  在webpack.config.js创建module

  
  OK,配置项已经写完了。
  接下来创建json文件，随便写点内容，在工作文件work.js引入

命令行输入`webpack`，运行webpack。

json-loader成功！

• loaders之css-loader和style-loader

  webpack提供两个工具处理样式表，css-loader和style-loader
  css-loader使你能够使用类似@import和url(...)的方法实现require()的功能，style-loader将所有的计算后的样式加入页面中，二者组合在一起使你能够把样式表嵌入webpack打包后的js文件中。
  命令行输入cnpm install --save-dev style-loader css-loader，安装style-loader和css-loader
  配置项写法：
  module: {

     loaders: [
         {
             test: '/\.css$/',
             loader: 'style!css'
           }
     ]
  

  }

  

新建一个css文件并在入口文件main.js引入，执行webpack，看下效果

奇怪了，报错，看了半天。
将配置项换种写法

rules:[{
       test:/\.css$/,
       use: ['style-loader', 'css-loader'],
     }]

执行webpack，看下效果

OK,css引进去了。

• lodaer之postcss-loader，autoprefixer

  考虑到兼容性问题，为css添加前缀,我们就使用postcss-loader，autoprefixer。
  命令行输入cnpm install --save-dev postcss-loader autoprefixer,
  配置项：
  

在webpack.config.js同级目录下新建postcss.config.js

执行webpack，去浏览器审查元素

前缀添加成功！