webpack4新建一个项目

Create a new directory

　　mkdir webpack-4-quickstart

Initialize a package.json by running:

　　npm init -y

 {
   "name": "test",
   "version": "1.0.0",
   "description": "",
   "main": "index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
     "dev": "webpack --mode development",
     "build": "webpack --mode production",
     "server": "webpack-dev-server --config webpack.config.js"
   },
   "author": "",
   "license": "ISC",
   "devDependencies": {
     "babel-core": "^6.26.0",
     "babel-loader": "^7.1.4",
     "babel-preset-env": "^1.6.1",
     "css-loader": "^0.28.11",
     "html-webpack-plugin": "^3.1.0",
     "style-loader": "^0.20.3",
     "webpack": "^4.2.0",
     "webpack-cli": "^2.0.13",
     "webpack-dev-server": "^3.1.1"
   }
 }

package.json

安装以上配置文件里没有的包

npm i -D 包名

加载自定义文件

 const webpack=require("webpack")
 const HtmlWepackPlugin = require('html-webpack-plugin');
 const path = require('path');
 module.exports={
     entry:{
         index:path.resolve(__dirname,'src/entry.js')
     },
     output: {
         filename: '[name].[hash].js',
         path: path.resolve(__dirname, 'dist'),
         publicPath: '/dist/'
       },
       module: {
         rules: [
           {test: /\.js$/, use: ['babel-loader']},
           {test: /\.css$/, use: ['style-loader', 'css-loader']}
         ]
       },
       plugins: [
         new HtmlWepackPlugin({
           filename: './index.html',
           template: './template.html'
         })
       ]
 }

webpack.config.js

文件目录如下：