webpack 打包 html js

1.创建项目安装webpack 依赖

1. 新建一个demo文件，cmd进去（首先要安装 Node.js， Node.js 自带了软件包管理器 npm）
2. 依次执行，

npm init -y,生成package.json文件

npm install webpack -g 全局安装webpack

npm install webpack --save-dev 项目中安装

成功以后构建如下的文件建构，

index.html:

one.js:

main.js:

3.打包html,js。
打包html需要使用插件

npm install html-webpack-plugin --save-dev

编写webpack.config.js:

const path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin'); //打包html的插件
module.exports = {
    entry: './main.js',
    devServer: {
        contentBase: './dist',
        compress: true,
        port: 8000
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js'
    },
     //插件
     plugins:[
        new HtmlWebpackPlugin({
            chunks:['/dist/index'],
            filename:'index.html',
            template:'index.html'  
        })
     ]
};  

修改package.js文件：

{
  "name": "webpacks",
  "version": "1.0.0",
  "description": "",
  "private": true,
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack-dev-server --open",
    "build": "webpack"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {},
  "devDependencies": {
    "html-webpack-plugin": "^4.3.0",
    "webpack": "^4.44.1",
    "webpack-cli": "^3.3.12",
    "webpack-dev-server": "^3.11.0"
  }
}

npm run build 进行打包