webpack学习

1.安装webpack

1.安装webpack，安装之前先初始化下npm,  npm install,然后安装wepack，安装命令

npm install webpack --save-dev。

2.webapc相关文件介绍

在编辑中新建一个hello.js的文件，然后在控制台下执行webpack hello.js hello.bundle.js命令，结果如下：

 

2.1文件依赖

在hello.js中引用另个js文件，重新打包，在hello.bundle.js文件中发现，原来的引用方式发生了改变，

变成了

2.2css文件的引用

css文件的引用需要安装css-loader和style-loader，安装命令：npm install css-laoder style-loader --save-dev。

在引入文件之前需要添加style-loader！css-loader!否则css文件不起作用

css-loader使webpack可以处理.css文件，style-laoder将css文件的内容插入到head标签内。

这种单个文件添加的方式并不方便。另外一种是用命令行的方式，

webpack hello.js hello.bundle.js --module-bind 'css=style-loader!css-loader'，如果文件每次更改都要执行一次，很麻烦可以使用--watch来监听文件的更新webpack hello.js hello.bundle.js --module-bind 'css=style-loader!css-loader' --watch。

    打包过程可以用--progress,   webpack hello.js hello.bundle.js --module-bind 'css=style-loader!css-loader' --progress。

    打包的模块可以用--display-modules,     webpack hello.js hello.bundle.js --module-bind 'css=style-loader!css-loader' --progress --display-modules。

 

3.webpack 基本配置

在webpack.config.js文件中配置如下

entry表示入口文件地址，entry有三种方法：一种是只有一个入口文件，就是图中的格式，另一种是：有多个入口文件，文件是平行的，不相依赖的文件打包一起，格式写成数组的模式，

entry:['./src/script/main.js','./src/script/a.js']

第三种是给传入一个对象，这个对象可以是分为key和value。

 

        output表示出口文件，path表示打包好的文件路径，filename表示打包好的文件名称。如果入口文件是单个的可以按图中的格式写，当入口文件为多个的时候，要输入多个文件的时候就不能这么写了，使用以下的替换方式来确保每个文件名都不重复：

 [name] 被 chunk 的 name 替换。

[hash] 被 compilation 生命周期的 hash 替换。

[chunkhash] 被 chunk 的 hash 替换。

output:{
  path:__dirname+'/dist',  //文件输出位置
  // filename:'bundle.js'  单个文件的时候
  filename:'js/[name].bundle.js',
  // filename:'[name]-[hash].js'
  // filename:'js/[name]-[chunkHash].js'  //js文件名和位置
}

 

在命令行中直接输入webpack即可看到是否生效。如果webpack.config.js的名字更改了，可以通过--config参数在命令行中执行。webpack --config 新的文件名。

3.1在新的配置文件中添加参数，可以配合着npm文件中的pacage.json添加参数：

在控制台中执行npm run webpack即可。

4.自动化生成项目中的html页面

    4.1    在页面中如果引入的js文件名称自动改变，那么手工修改会变的特别的麻烦，html-webpck-plugin --save-dev插件提供了自动引入更新的js文件。安装插件：npm install html-webpack-plugin--save-dev

   在webapck.config.js文件中引入插件，并配置：

检验是否安装成功：npm run webpack

要生成新的index文件首先要先定义一个模板，模板内容有更改的话会映射到新生成的inex文件中。inject设置js文件放置的位置，如果在head标签里值为head，如果放在body里值为body。

4.2在配置文件中设置参数，index文件中取参

取参用<%=     %>的方式，遍历用<%        %>

结果：

参数的具体详情可以查看官网：https://www.npmjs.com/package/html-webpack-plugin

多个文件有的需要放的位置不同，有的文件需要放在head里，有的需要放在body里怎么办呢？这时候单单依靠配置文件已经满足不了了，这就需要在模板文件里设置了。设置方法：

文件打包好是要上传到服务器上的，如何让文件路径src指向线上的路径呢？插件中在在output对象中可以设置一个参数publicPath,设置的值为线上的路径，那么js文件的开端就会变成publicPath设置的值

结果（压缩文件的结果图没有截取，和平常的压缩文件一样）：

4.3    以上内容都是单页面的，项目中是多页面的，此时就需要在配置文件中修改：

 

此时生成的每个html文件中的内容是一样的，如果要按需引用需要在模板文件中进行更改：

结果：

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

转载于:https://my.oschina.net/sunachen/blog/911983