webpack.config.js

var htmlWebpackPlugin = require('html-webpack-plugin');//引用plugin，引用目的见自动生成html的文见

var path=require('path')//nodejs提供的获取路径的方法

//commonjs的模块化输出

module.exports = {

　　//context:,//运行环境的上下文，默认值为我们 运行该脚本的目录,我此处是根目录所以不需要写，如果你的不是请配置你的运行目　　
　　　　entry: './src/script/main.js',//打包的入口

　　//entry:['./src/script/main.js','./src/script/a.js'],//表示将两个文件打包在一起

　　//entry:{

　　　　main:'./src/script/main.js',

　　　　a:'./src/script/a.js',

　　　　b:'./src/script/b.js',

　　　　c:'./src/script/c.js',

　　},　　//如果output写的输出文件是一个的话，这种写法 还是会打包在一个文件里

　　output:{ //打包后的文件放在什么地方

　　　　path:'./dist/js',

　　　　//path:'dist', 将html文件输出到dist目录下

　　　　//filename:'js/[name]-[chunkhash].js', //将生成的js文件 输出到js目录下

　　　　filename:'bundle.js' //打包后的文件名

　　　　//filename:'[name]-[hash].js', //hash是指本次打包的hash

　　　　//filename:'[name]-[chunkhash].js',

　　　　publicPath:'static/dist'//上线后，引用的打包路径

　　},

　　plugins:[//使用引用的plugin

　　　　new htmlWebpackPlugin({

　　　　　　filename：'index-[hash].html', //生成的html的 名字,如果每次生成都带hash我们会很难查看哪个是最新生成的，所以我们一般的写法都是'index.html'

　　　　　　template:'index.html', //你想让生成的文件被那个html引用这里就写哪个

　　　　　　inject:'head', //想把生成的js文件的引用放在什么标签里，这里是放在head标签里

　　　　　　//传递参数，将该参数在界面上引用

　　　　　　title:'hhm is  good',

　　　　　　aa:'two',

　　　　　　minify:{

　　　　　　　　removeComments:true, //删除注释
　　　　　　　　collapseWhitespace:true//删除空格 

   drop_debugger: true, // 移除debugger 
 drop_console: true, // 移除console 
   pure_funcs: ['console.log','console.info']

 

　　　　　　　　//更多的属性可见官网api文档

　　　　　　}

　　　　}),

　　　　new htmlWebpackPlugin({

　　　　　　filename:'a.html',

　　　　　　template:'index.html',

　　　　　　inject:head,

　　　　　　title:'this is a.html',

　　　　　　//chunks:['a']//指定当前生成的html引入哪些js

　　　　　　excludeChunks:['b','c']//排除b c js 其它的都引入

　　　　}),

　　　　new htmlWebpackPlugin({

　　　　　　filename:'b.html',

　　　　　　template:'index.html',

　　　　　　inject:head,

　　　　　　title:'this is b.html',

　　　　　　chunks:['b']//指定当前生成的html引入哪些js

　　　　}),

　　　　new htmlWebpackPlugin({

　　　　　　filename:'c.html',

　　　　　　template:'index.html',

　　　　　　inject:head,

　　　　　　title:'this is c.html',

　　　　　　chunks:['c']//指定当前生成的html引入哪些js

　　　　})

　　],

　　module:{

　　　　loaders:[

　　　　　　{test:/\.js$/,

　　　　　　  loader:'babel',

　　　　　　  exclude:path.resolve(_dirname,'node_modules'),//告诉webpack不想处理的目录，提高打包速度。path.resolve是解析为绝对路径

　　　　　　  include:path.resolve(_dirname,'src'),//要处理的目录　　

　　　　　　 query:{ //这段代码也可以写在package.json里

　　　　　　　　presets:['latest'] //preset是将es6转换成浏览器可理解的js代码

　　　　　　　}

　　　　　　},// 告诉浏览器我们处理js的时候 要使用babel，它的presets我们使用latest

　　　　　　{

　　　　　　　　test:/\.css$/,

　　　　　　　　loader:'style-Loader!css-Loader!postcss-loader'

　　　　　　　　//处理通过@Import a.css引入css里的文件impotLoaders的值表示我们在css-loader之后还有几个loader要处理，我们这里只有一个postcss-loader，所以这里写1（less中已经帮我们默认的处理了这种情况）

　　　　　　　　loader:'style-Loader!css-Loader?importLoaders=1!postcss-loader'//style-Loader可简写成style，其它同理

　　　　　　},

　　　　　　{

　　　　　　　　test:/\.less$/,

　　　　　　　　loader:'style!css!postcss!less' //放置顺序：如果你需要把postcss放在webpack的配置文件中就必须放在style-loader前面和sass或less-loader的后面

　　　　　　},

　　　　　　{

　　　　　　　　test:/\.html$/,

　　　　　　　　loader:'html'

　　　　　　}，

　　　　　　{//只要是添加了图片的loader，不管是样式中的引用还是界面上的引用它会被处理

　　　　　　　　test:/\.(png|jpg|gif|svg)$/i,

　　　　　　　　loader:'file-loader', //如果图片很多建议用这个

　　　　　　　　//loader:'url-loader',

　　　　　　　　//loaders:[ //如果这样写下面的query就要去掉

　　　　　　　　　　'url-loader?limit=2000$name=img/[name]-[hash:5].[ext]',

　　　　　　　　　　'image-webpack'

　　　　　　　　]

　　　　　　　　query:{ //图片打包后的输出目录

　　　　　　　　　　//limit:20000,

　　　　　　　　　　name:'img/[name]-[hash:5].[ext]'

　　　　　　　　}

　　　　　　}

　　　　]

　　},

　　postcss:[ //处理不容易被浏览器解析的css

　　　　require('autoprefixer')({

　　　　　　broswers：['last 5 versions'] //对浏览器的版本进行处理

　　　　　　

　　　　})

　　]

}