webpack

1.什么webpack

webpack是一个现代化JavaScript应用程序的模块打包器。当webpack处理应用程序时,它会递归地 构建一个依赖关系图,其中包含应用程序需要的每个模块,然后将所有与这些模块打包成一个或者多个bundle。

入口(entry)

需要打包的入口文件,webpack会根据入口文件的依赖关系,自动把依赖的文件进行打包

 

webpack.config.js

module.exports = { entry:"index.js" };

出口(output)

output属性告诉webpack在哪里输出所创建的bundles,以及如何命名这些文件。你可以通过在配置中制定一个output字段,在配置这些处理过程。

//这是一个第三方库,需要npm install --save-dev path 下载
const path = require("path");
module.exports= {
entry:"index.js",
output:{
//路径
path:path.resolve(__dirname,'dist'),
//输出的文件名
filename:'bundle.js'
} }

loader

loader是让webpack处理那些非JavaScript文件,把不同类型的文件转化为webpack能够处理的有效模块,然后利用webpack的打包能力,对它们进行处理,一般用两个属性进行配置

1.识别出应该被对应的loader进行转换的那些文件。(使用test属性)

2.转换这些文件,从而使其能够被添加到依赖图中(并最终添加到bundle中)(use属性)

不同的文本类型需要不同的loader

module.exports= {

entry:"index.js",

output:{

//路径

path:path.resolve(__dirname,'dist'),

//输出的文件名

filename:'bundle.js'

},

module:{

rules:[

test:/\.txt/,

use:'raw-loader'

]

}

}

插件(plugins)

插件主要增加webpack的功能,打包优化,压缩文件,快速构建项目等等。使用方法 通过require()方法应用插件,然后把它添加到plugins数组中。多数插件可以通过选项(option)的自定义。你也可以在一个配置文件中因为不同的目的多次使用同一个插件,这时需要通过使用new操符来创建它的实例

const path = require('path');

const HtmlWebpackPlugin = require('html-webpack-plugin');

const CleanWebpackPlugin = require('clean-webpack-plugin');

module.exports = {

entry:{ app:'./src/main.js', print:'./src/print.js' },

 output:{ filename:'[name].bundle.js',

path:path.resolve(__dirname,'dist')

},

module:{

rules:[

{

test:/.css$/,

use:['style-loader', 'css-loader' ] }] },

plugins:[ new CleanWebpackPlugin(['dist']),

new HtmlWebpackPlugin({title:'output Manager'})

] };

posted @ 2017-12-18 20:09  仙人掌的成长  阅读(183)  评论(0编辑  收藏  举报