二、vue项目webpack打包

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 

步骤总结：

a.安装对应loader (npm install xxx —save-dev)  
b.修改配置文件（module） 

更多内容可以查看https://segmentfault.com/a/1190000013052777?utm_source=tag-newest，这里只选取了我用到的部分