webpack搭建简单的多页面应用

最新推荐文章于 2024-08-05 16:29:41 发布

裂魂人1214

最新推荐文章于 2024-08-05 16:29:41 发布

阅读量1w

点赞数

分类专栏： webpack 文章标签： webpack

本文链接：https://blog.csdn.net/b422761838/article/details/77427792

版权

webpack 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1.新建webpack文件夹，npm -init,按需填写，也可以一路回车，最后‘y’

2.在webpack目录下新建webpack.config.js文件，因为webpack打包时会自动查找根目录下webpack.config.js文件,若想自定义webpack的文件,可以使用

webpack --config参数

3.安装html-webpack-plugin插件 在终端中输入npm install html-webpack-plugin

4.webpack.config.js中添加如下代码

/**
 * Created by kongwc on 2017/8/18.
 */
var path = require("path")
var htmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    entry :　{
       main :  './src/script/main.js',//入口js文件1
       index : './src/script/index.js',//入口js文件2
       a : './src/script/a.js',
       b : './src/script/b.js',
       c : './src/script/c.js'

    },
    output : {
        path: path.resolve(__dirname, 'dist'),//输出的文件路径
        filename: 'js/[name]-[chunkhash].js'//输出的js文件名
       // publicPath : 'www.baidu.com'//若有地址，则打包会变为上线地址
    },
    plugins : [
        new htmlWebpackPlugin({
            filename : 'a.html',//输出的html路径
            template : 'index.html', //html模板路径
            //inject : 'head',  //js文件在head中，若为body则在body中
            inject : true,
            title : 'this is a.html',
            author : 'Kongwc',
            //excludeChunks: ['main'],//打包时不打包main.js文件
            chunks : ['main', 'a'], //打包时只打包main和a的js文件，见entry，注意使用chunks时模板index.html文件里面不允许有script标签，即使注释掉也会报错
            date : new Date()/*,
            minify : {
                removeComments : true, //打包后删除参数
                collapseWhitespace : true //打包后删除空格
            }*/

        }),
        new htmlWebpackPlugin({
            filename : 'b.html',//输出的html路径
            template : 'index.html', //html模板路径
            //inject : 'head',  //js文件在head中，若为body则在body中
            inject : true,
            title : 'this is b.html',
            author : 'Kongwc',
            date : new Date(),/*,
             minify : {
             removeComments : true, //打包后删除参数
             collapseWhitespace : true //打包后删除空格
             }*/
            chunks : ['b'],
        }),
        new htmlWebpackPlugin({
            filename : 'c.html',//输出的html路径
            template : 'index.html', //html模板路径
            //inject : 'head',  //js文件在head中，若为body则在body中
            inject : true,
            title : 'this is c.html',
            author : 'Kongwc',
            date : new Date(),/*,
             minify : {
             removeComments : true, //打包后删除参数
             collapseWhitespace : true //打包后删除空格
             }*/
            chunks : ['c']
        })
    ]
}

5.webpack.config.js中涉及的文件

main.js、index.js

/**
 * Created by kongwc on 2017/8/17.
 */
function hello() {
}
hello();
console.log("123456");
a.js、b.js、c.js

/**
 * Created by kongwc on 2017/8/19.
 */
function index() {
   alert('this is a.js');
}

index();

index.html(模板文件,生成a.html、b.html、c.html都要依赖此文件)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--若打包后的某些文件想放到head中，某些文件想放到body中，可以如下 -->
    <title><%= htmlWebpackPlugin.options.title%></title>

</head>
<body>

<h1>
    作者:<%= htmlWebpackPlugin.options.author%>
    时间:<%= htmlWebpackPlugin.options.date%>
    <!-- 打印htmlWebpackPlugin所有的参数-->
</h1>
<% for(var key in htmlWebpackPlugin){%>
<%= key%>
<%}%>
<hr>
<% for(var key in htmlWebpackPlugin.files){%>
<%= key%> : <%=JSON.stringify(htmlWebpackPlugin.files[key])%>
</br>
<%}%>
<hr>
<% for(var key in htmlWebpackPlugin.options){%>
<%= key%> : <%=JSON.stringify(htmlWebpackPlugin.options[key])%>
</br>
<%}%>
</body>
</html>

注意：每次编辑html或者js文件时，都需要重新webpack，此时可以在package.json

中的scripts中添加如下代码

"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "webpack" : "webpack --watch --colors"
},

然后npm run webpack即可

--watch表示监听每次代码的改动，重新打包，webpack其他参数可以参考webpack文档

package.json

{
  "name": "vuejs",
  "version": "1.0.0",
  "description": "webpack",

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "webpack" : "webpack --watch --colors"
  },
  "author": "kongwc",
  "license": "ISC"
}