webpack基础使用（二）

webpack.config.js文件的配置：输入：module.exports={

                                                                   entry:  //入口文件，可以使string类型  例如：'./src/script/main.js'  还可以使用数组的形式 例如：['./src/script/main.js','./src/script/main1.js']

 

                                                                   output:{//打包以后的文件

                                                                         path://__dirname +打包后的文件放路径     例如：__dirname +'/dist'

                                                                         filename://打包之后的文件名

                                                                   }

                                                    }

 

 

webpack.config.js文件的配置：输入：module.exports={

                                                                   entry: { //入口文件

                                                                         page1:'',  //可以使string类型  例如：'./src/script/main.js'  还可以使用数组的形式 例如：['./src/script/main.js','./src/script/main1.js']

                                                                         page2:''  //同上

                                                                 }

                                                                   output:{//打包以后的文件

                                                                         path://__dirname +打包后的文件放路径     例如：__dirname +'/dist'

                                                                         filename:// [name]打包之后的文件名  例如:'[name].js'  三个占位符 1.[name]:由块的名称替换(page1,page2)   2.[hash]:替换为编译的哈希值   3.[chunkhash]:被块的哈希所替换

                                                                   }

                                                    }

动态打包之后生成的文件名是不确定的,如通过[name],[hash]或[chunkhash]生成的打包文件，可以利用webpack插件解决这个问题：首先安装这个插件（npm install html-webpack-plugin --save-dev）,

                 在webpack.config.js 上 var htmlWebpackPlugin =require('html-webpack-plugin')， 在module.exports中配置 添加一项   plugins:[ new  htmlWebpackPlugin  ]

例如：  (html 和js生成在同一个文件夹里)

     var htmlWebpackPlugin=require('html-webpack-plugin');
     module.exports={
             //context:''   上下文，运行脚本的的目录
              entry:{
                  page1:'./src/script/main.js',
                  page2:'./src/script/main1.js'
           },
           output:{
                path:__dirname +'/dist/js',
                filename:'[name].bundle.js' 
         }, 
        plugins:[
             new htmlWebpackPlugin({
             template:'index.html'//  以根目录下的index.html生成模板 生成index.html

             minify:{//对生成的html文件进行操作

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

             }
          })        

       ]

      

}         

 

配置js生成在dist/js下面  html生成在dist下面

     var htmlWebpackPlugin=require('html-webpack-plugin');
     module.exports={
             //context:''   上下文，运行脚本的的目录
              entry:{
                  page1:'./src/script/main.js',
                  page2:'./src/script/main1.js'
           },
           output:{//修改

              path:__dirname +'/dist',
              filename:'js/[name].bundle.js'

         }, 
        plugins:[
             new htmlWebpackPlugin({

             //filename:'' 指定生成的html的名称
             template:'index.html'//  以根目录下的index.html生成模板 生成index.html

             //inject:'body' 指定脚本生成在body标签里

            //传值  例如：data:'aaa',页面上<%= htmlWebpackPlugin.options.data%> 输出 aaa
        })
     ]

}

 

利用npm给wabpack添加参数：在package.json里面的 scripts 下配置wabpack  例如："webpack":"webpack --config  webpack.config.js --progress --display-modules --colors --watch"，可以通过npm run webpack