webpack 简单配置

2019独角兽企业重金招聘Python工程师标准>>>

（一）

webpack.config.js： 

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const webpack = require('webpack');

module.exports = {
	// entry: './src/index.js',
	entry: { //入口有几个文件，出口就会输出几个文件
		app: './src/index.js',
		print: './src/print.js'
	},
	output: {
		// filename: 'bundle.js',
		filename: '[name].bundle.js',
		path: path.resolve(__dirname, 'dist')
	},
	devServer: { //为你提供了一个简单的 web 服务器，并且能够实时重新加载 npm install --save-dev webpack-dev-server
		// contentBase: './dist',
		contentBase: path.join(__dirname, "dist"),//告诉服务器从哪里提供内容。只有在你想要提供静态文件时才需要
		compress: true, //一切服务都启用gzip 压缩
		historyApiFallback: true,
		hot: true, //启用 webpack 的模块热替换特性
		port: 9000 //指定要监听请求的端口号
	},
	devtool: 'inline-source-map', //工具仅用于开发环境，请不要在生产环境中使用它们！ 为了更容易地追踪错误和警告
	module: {
		rules: [{ //加载css npm install --save-dev style-loader css-loader
				test: /\.css$/,
				use: [
					'style-loader',
					'css-loader'
				]
			},
			{ //加载图片 npm install --save-dev file-loader
				test: /\.(png|svg|jpg|gif)$/,
				use: [
					'file-loader'
				]
			},
			{ //加载字体
				test: /\.(woff|woff2|eot|ttf|otf)$/,
				use: [
					'file-loader'
				]
			}
		]
	},
	plugins: [ //设定 HtmlWebpackPlugin npm install --save-dev html-webpack-plugin
		new HtmlWebpackPlugin({ //设定 HtmlWebpackPlugin,生成新的html替换旧的html npm install --save-dev html-webpack-plugin
			title: 'Output Management'
		}),
		new CleanWebpackPlugin(['dist']), //清理 /dist 文件夹,重新生成新的dist文件夹
		new webpack.NamedModulesPlugin(),
		new webpack.HotModuleReplacementPlugin()
	]
};

package.json:

{
  "name": "webpack-demo",
  "version": "1.0.0",
  "description": "",
  "private": true,
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
    "start": "webpack-dev-server --open"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "clean-webpack-plugin": "^0.1.19",
    "css-loader": "^1.0.1",
    "file-loader": "^2.0.0",
    "html-webpack-plugin": "^3.2.0",
    "style-loader": "^0.23.1",
    "webpack": "^4.23.1",
    "webpack-cli": "^3.1.2",
    "webpack-dev-server": "^3.1.10",
    "webpack-merge": "^4.1.4"
  },
  "dependencies": {
    "lodash": "^4.17.11"
  }
}

 

 

转载于:https://my.oschina.net/u/3946362/blog/2354422