对于一个新手，怎么写代码不是最重要的，先理清楚思路会事半功倍。本人也是一个新手，埋头苦啃多个技术博客和官方文档之后，决定用一些最接地气的语言描述一下心得。
首先webpack拿来撸开发环境，怎么叫拿它撸一个开发环境呢？说白了你还记得你刚学习前端的时候是怎么写界面的吗，html文件里面引入css和js。就是这么耿直的操作，webpack搭建开发环境有什么区别？webpack搭建的开发环境就是把这些我们以前写的各种文件分的更细更杂。我们来梳理一下思路，当初我们写js，有可能一个H5的活动项目的js全部都写在一个js文件中了（反正我是干过这事的），然后在html文件中引用，对吧？那么在webpack中，我们可以把一个页面的js分成若干个js文件来写，为什么要这样呢，因为我们的html文件现在喜欢分模块来写了，不再像以前一样整个项目只有一个html文件了，那么打个比方说一个页面我们分成三个模块（之后统称组件）来写，这个页面我们就能对应有三个css文件三个js文件，这样做的好处也成为组件式开发的好处就是维护和修改比之前简单多了。那么，好，这样的开发环境自然跟以前的不一样了，所以现在这种webpack拿来搭建开发环境之后我们怎么开发呢，首先这种开发手法我们把文件分为最基本的三大类：
1.html文件必不可少，但是它已经不是从前那个密密麻麻h5标签代码的那个它了，它甚至可以空的（有meta，body之类的基本开头），它现在起的作用就是一个载体模板，因为浏览器跟这个文件最熟，没办法所以别的文件夹利用某种渠道将内容都添加到这个文件，才在浏览器上打开看到效果。
2.index.js（或者***.js自己命名）入口文件，这就是上面提到的“某种渠道”。所有的文件夹想把自己的东西给别人用都要经过入口同意，这里就拿最基本的（所有文件夹都想把自己的内容拿给html用），入口文件require了也就是同意了，你的内容在能在html上得到体现。
3.module.js模块文件，说的通俗一点就是你想要在页面上加点东西，那你就定义一个模块文件去装它，完了之后再通过入口文件的同意，在html模板上得到体现。module就是各种模块组件。它必须是以要输出的的形势来写的，怎么理解呢？就是你后台不够硬要想出人投地就要卑躬屈曲，你自己要先写成输出的形势，别人才会来要你，所以module.js中都要有module.exports=[
......
]
完了之后你只需要启动一下webpack就行了，页面上就可以看到效果。命令行：
webpack index.js bundle.js（我这里只是把入口文件打了一下包再在html中引用）
理解这三个东西你就能看到效果了，但是，webpack理论上只能打包处理js类型的文件，那么我们的样式css文件就处理不了了！所以webpack中还用到一个必须掌握的东西叫做 loader，它就是帮webpack打下手，webpack处理不了的事它来做，安装了loader入口文件才能有效的引用js文件之外的其他文件，让css生效的loader的命令行：
npm install css-loader style-loader
这就安装好了，入口文件可以引用了，require（'!style!css!./style.css'）这是loader的标准引用，只是看起来有点太麻烦，那我们就换成了另一个方便的写法require('./style.css')这样写的前提是，命令行得改成这样：
webpack index.js bundle.js --module-bind 'css=style-loader!css-loader'
新人刚上手，理解有失的望大佬指点。至于webpack其他插件的使用，和package.json文件中的配置我还要细细研究一番。
网友评论