环境

ubuntu linux虚拟机

sudo apt install npm

npm -v 3.5.2

node -v v8.10.0

执行命令

1、npm init

生成package.json文件

2、npm install –-save-dev webpack

npm install –-save-dev webpack-cli

引入webpack包

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

引入html-webpack-plugin 插件

最终文件

$ ls

dist node_modules package.json src webpack.config.js

src$ ls

app.js

dist$ ls

app.bundle.js index.html

dist是生成出来的最终文件

package.json

cat package.json

{

"name": "test1",

"version": "1.0.0",

"description": "",

"main": "index.js",

"scripts": {

"test": "echo \"Error: no test specified\" && exit 1",

"prod": "webpack --config webpack.config.js --progress"

},

"author": "",

"license": "ISC",

"devDependencies": {

"babel-preset-es2015": "^6.24.1",

"html-webpack-plugin": "^3.0.6",

"webpack": "^4.1.1",

"webpack-cli": "^2.0.12"

}

}

app.js

cat app.js

console.log('hello world');

alert('hello world');

webpack.config.js

cat webpack.config.js

var HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {

entry: './src/app.js',

output: {

path: __dirname + '/dist',

filename: 'app.bundle.js'

},

plugins: [new HtmlWebpackPlugin()]

运行

npm run prod

运行dist目录下的index.html