您的位置: 首页  >  文章  >  Webpack3的使用（二）

Webpack3的使用（二）

分类: 文章 • 2025-03-21 07:59:57

Webpack3的使用（二）

Webpack-v3.5.4的使用（一）中，提到：

目前html文件中只是引用一个script文件，且是固定的文件名，打包以后的文件名不确定，怎样避免手动设置路径？

那么接下来就是插件html-webpack-plugin登场了！

（一）、安装

1、安装插件  npm install html-webpack-plugin --save-dev

2、在webpack.config.js中引入插件

var htmlWebpackPlugin = require('html-webpack-plugin');

3、用plugins进行初始化

plugins: [

new htmlWebpackPlugin()

]

4、运行npm run webpack

注意：在这里如果webpack是全局安装的话运行npm run webpack会报错！首先运行npm link webpack 后再运行npm run webpack

（二）、dist中的index.html如何与src文件夹中的index.html代码同步

在plugins中传入参数：template: 'index.html'（且该模版是在根目录下）,src文件夹下index.html文件中手动引用的script标签即可并运行npm run webpack


（三）、目前所有生成的文件都在js文件夹下，不符合开发，index.html是在dist目录下的，如何分离

Webpack3的使用（二）Webpack3的使用（二）

（四）、更复杂的应用（plugins中传其他参数）

 1、改变某一部分的内容

Webpack3的使用（二）

src文件夹下的index.html文件title标签中的内容改为：

Webpack3的使用（二）

npm run webpack后dist目录下生成新的index.html文件，且title标签内容与设置的同步

2、将引入的js文件一部分放到head标签里一部分放到body标签里

  参数inject值改为false

     src文件夹下index.html代码改动

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<title><%= htmlWebpackPlugin.options.title %></title>

<script type="text/javascript" src="<%=htmlWebpackPlugin.files.chunks.main.entry %>"></script>

</head>

<body>

<h1>欢迎来到WabPack世界！</h1>

<%= htmlWebpackPlugin.options.data %>

<script type="text/javascript" src="<%=htmlWebpackPlugin.files.chunks.a.entry %>"></script>

</body>

</html>

3、打包以后跟上线的地址肯定不一样，那么就需要新属性

output: {

path:'./dist',

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

publicPath: 'http://xxx.com/'

},

（五）、处理生成多页面应用

1、src中增加多个js文件后

entry: {

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

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

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

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

},

 plugins中设置多个new htmlWebpackPlugin并按照不同的需求写入代码

2、解决不同的页面引入不同的script，而不是固定指向

删除src中index.html中引入的js

运用参数chunks    chunks: ['a','main']

            å‚æ•°excludeChunks指的是除了哪些，其他的都被指定，与chunks相反

3、部分js以外链形式引入，部分以内嵌放入

      å‚æ•°inject的值改为false

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<title><%= htmlWebpackPlugin.options.title %></title>

<script type="text/javascript">

<%= compilation.assets[htmlWebpackPlugin.files.chunks.main.entry.substr(htmlWebpackPlugin.files.publicPath.length)].source() %>

<!-- 此部分是表示将js源码放入head标签中，而不是以引用外部链接的方式 -->

</script>

</head>

<body>

<% for(var k in htmlWebpackPlugin.files.chunks) { %>

<% if(k !== 'main') { %>

<script type="text/javascript" src="<%= htmlWebpackPlugin.files.chunks[k].entry %>"></script>

<% } %>

<% } %>

<!-- 该部分还是以外部链接引用的方式引用js -->

</body>

      </html>


以上是js更用打包用法，基础打包可以参考 Webpack-v3.5.4的使用（二）：http://blog.****.net/liuxin_1991/article/details/78834999

那么除了js的打包，经常见的loader又有什么用呢？下回笔记更新。。。 Webpack-v3.5.4的使用（三）



相关推荐