关于webpack的项目文件:
第一步:下载插件
$ cnpm install html-webpack-plugin --save-dev
第二步:配置webpack.config.js
const path = require('path');let htmlwebpackplugin = require('html-webpack-plugin');//引入html-webpack-plugin插件 let export_html= { entry: { main:__dirname+"/app/js/main.js",//入口文件 }, output: { path: __dirname+"/_build/", filename: "js/[name].js",//产出文件,name根据entry的入口文件键名定 }, module: { loaders: [ { test: /(\.jsx|\.js)$/, loader: 'babel-loader', query: { presets: ['es2015'] } }, ] } , plugins: [ //new一个模板出来 new htmlwebpackplugin({ template: './app/home.html',//入口文件 filename: 'home.html',//产出文件 }) ] };module.exports=export_html;
测试:打开cmd到项目目录输入:webpack
app下的home.html,在_build下也生成了一个home.html
app/home.html:
_build/home.html:
可以看到,生成的文件多了一个引入main.js的script;
这是因为没有对产出文件做限制的话,它会引入所有产出的JS文件。这个可以在entry入口多引入一个js文件测试。
下面是我关于webpack配置的所有链接
webpack配置(第一步:配置前提):
webpack配置(第二步:入门篇):
webpack配置(第三步:ES6篇):
webpack配置(第四步:html篇(基础篇)):
webpack配置(第四步:html篇(进阶篇)):
webpack配置(第四步:html篇(模板篇)):
webpack配置(第五步:less/css篇(基础篇)):
webpack配置(第五步:less/css篇(进阶篇)):
webpack配置(第五步:less/css篇(url图片篇)):