webpack.03-打包js同时生成html页面

在空文件夹初始化：CMD

npm init -y

cnpm install -D webpack webpack-cli

文件结构

src（文件夹）--->test.js

console.log('hello webpack')

src（文件夹）--->index.html

<html>
    <body>
    <script script="test.js"></script>
    </body>
</html>

src（文件夹）--->package.json

{
  "name": "03",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "webpack src/test.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

安装插件CMD：HtmlWebpackPlugin------> https://webpack.js.org/plugins/html-webpack-plugin/

cnpm install --save-dev html-webpack-plugin

src（文件夹）--->webpack.config.js

var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    entry: './src/main.js',
    plugins: [new HtmlWebpackPlugin()]
};

打包：CMD

npm run build

或者

webpack src/test.js------webpack 需要全局安装( cnpm install -g webpack webpack-cli )

生成文件夹和文件

dist（文件夹）
--->index.html

--->main.js

来源：oschina

链接：https://my.oschina.net/u/2540245/blog/4291961

标签

CNPM

Webpack

npm

javascript

Entry

易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!