webpack搭建简单的多页面应用

来源：互联网发布：进入telnet端口命令编辑：程序博客网时间：2024/06/14 18:18

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"}

阅读全文

0 0