1.入口(entry) :使用哪个模块来构建内部依赖图的开始
我们可以新建webpack.config.js来制定以上概念。接下来一项一项来解释。
1entry（如下图所示，分为单入口、多入口、混合入口）
2.输出(output) :在哪里输出它所创建的bundles及命名规则
【tips】这里需要注意的用__dirname需要引用node自带的path
【tips】filename中的[name]会对应入口中的path参数，没有默认是main。文件会被打包到pach+filename下。
因为在配置文件里面已经指定了入口文件及输出，因此，我们不需要再在命令中指定入口和出口了，可以利用四中的npm run。 webpack来实验下：
运行后可以看到生成了main.package.js文件，一共打包了三个文件。
【tips】特别值得注意的是，在被打包文件最开始的位置有[0],[1],[2]的标示，这是文件的id分配，这是webpack打包的核心。我们接下来看下main.package.js文件，这里打包完的文件可以通过id值来引用对应的js文件。
【添加css】接下来我们给页面添加一点样式
npm run webpack之后可以发现以下报错：
【tips】这个是因为webpack只能处理js文件，如果需要处理css 图片等文件需要安装对应的loader
3 loader（将程序资源文件进行转换，是nodejs的函数 ）
第一步：安装loader:
npm install style-loader css-loader —save-dev npm install less-loader —save-dev
第二步：使用loader:
1.引用模块时添加 `require("!style-loader!css-loader!./style.css")`
2.命令行 `webpack entry.js bundle.js --module-bind ‘css=style-loader!css-loader’`
3.配置文件 `module:{ loaders:[ { test:/\.css$/, loaders:['style-loader','css-loader'] //loader: 'style-loader!css-loader' } ] }`
常用loader
npm install babel-loader bable-core —save-dev
npm install babel-preset —save-dev
npm install html-loader —save-dev
npm install file-loader —save-dev
步骤总结：
扫描二维码关注公众号，回复：
8750287 查看本文章
a.安装对应loader (npm install xxx —save-dev)
b.修改配置文件（module）
更多内容可以查看https://segmentfault.com/a/1190000013052777?utm_source=tag-newest，这里只选取了我用到的部分
