simple webpack 脚手架初稿

Posted 2020-10-20

npm install 以下模块

package.json

{
  "name": "webpack-scaffold",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "css-loader": "^0.28.7",
    "file-loader": "^1.1.5",
    "style-loader": "^0.19.0",
    "url-loader": "^0.6.2",
    "webpack": "^3.10.0",
    "webpack-dev-server": "^2.9.7"
  }
}

测试环境

build/dev.js

var webpack = require("webpack");
var config = require("../config/config.dev.js");
var WebpackDevServer = require('webpack-dev-server');


/* ======================================== method 1 ======================================== */
/*config.entry.unshift("webpack/hot/dev-server");
config.entry.unshift("webpack-dev-server/client?http://localhost:8080/");
var compiler = webpack(config);
var server = new WebpackDevServer(compiler, {
    hot: true,
	publicPath:"/",
	contentBase:"../dist"
});*/

/* ======================================== method 2 ======================================== */
var options = {
	contentBase: '../dist',
	hot: true,
	host: 'localhost',
	port:8080
};
WebpackDevServer.addDevServerEntrypoints(config, options);
var compiler = webpack(config);
var server = new WebpackDevServer(compiler, options);


server.listen(8080);

config/config.dev.js

var htmlWebpackPlugin = require("html-webpack-plugin");
var CleanWebpackPlugin = require("clean-webpack-plugin");
var path = require("path");
var webpack = require('webpack');

var distDirName = "dist";
var distDir = "../"+distDirName;
var outputJsFileName = "result.js";
var outputHtmlFileName = "app.html";
var templateHtmlPath = "../template.html";
var entryFilePath = "../js/app.js";

var webpackConfig = {
	entry: [entryFilePath],
	output: {
		path: path.resolve(__dirname, distDir),
		filename: outputJsFileName
	},
	resolveLoader:{
		// modules:["../../../npm_repository/node_modules"]
		/* loader resolve 查找loaders */
		// modules:["node_modules","/workspace/npm_repository/node_modules"] 
	},
	devServer: {
		hot: true,
		contentBase: distDir
	},
	module: {
		rules: [
			{
				test: /\.(png|jpg|gif)$/,
				use: [
					{
						loader: "url-loader",
						options: {
							limit: 8192 // 小于这个尺寸的变成base64
						}  
					}
				]
			},
			{
				test: /\.css$/,
				use: ["style-loader", "css-loader"]
				// use: ["style-loader/url", "file-loader"]
			}
		]
	},
	plugins: [
		new webpack.NamedModulesPlugin(),
	    new webpack.HotModuleReplacementPlugin(),
		// new CleanWebpackPlugin([distDirName],{
		// 	root:path.resolve(__dirname,"../")
		// }),
		new HtmlWebpackPlugin({
			filename:outputHtmlFileName,
			template:templateHtmlPath
		})
	]
};

module.exports = webpackConfig;

生产环境

build/build.js

var webpack = require("webpack");
var config = require("../config/config.product.js");
var compiler = webpack(config);
console.log("start building ...");
compiler.run(function(error,status){
	if(error){
		console.log(error);
		return;
	}
	console.log(status.toString());
});

config/config.product.js

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

var distDirName = "dist";
var distDir = "../"+distDirName;
var outputJsFileName = "result.js";
var outputHtmlFileName = "app.html";
var templateHtmlPath = "../template.html";
var entryFilePath = "../js/app.js";

var webpackConfig = {
	entry: entryFilePath,
	output: {
		path: path.resolve(__dirname, distDir),
		filename: outputJsFileName
	},
	resolveLoader:{
		// modules:["../../../npm_repository/node_modules"]
		/* loader resolve 查找loaders */
		// modules:["node_modules","/workspace/npm_repository/node_modules"] 
	},
	module: {
		rules: [
			{
				test: /\.(png|jpg|gif)$/,
				use: [
					{
						loader: "url-loader",
						options: {
							limit: 8192 // 小于这个尺寸的变成base64
						}  
					}
				]
			},
			{
				test: /\.css$/,
				use: ["style-loader", "css-loader"]
				// use: ["style-loader/url", "file-loader"]
			}
		]
	},
	plugins: [
		new CleanWebpackPlugin([distDirName],{
			root:path.resolve(__dirname,"../")
		}),
		new HtmlWebpackPlugin({
			filename:outputHtmlFileName,
			template:templateHtmlPath
		})
	]
};

module.exports = webpackConfig;

html-webpack-plugin使用的模板文件template.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>App</title>

</head>
<body>
    <div id="app">
     <div>
     <em></em>
     <div>小麻团</div>
     </div><!-- user-info -->
    </div><!-- app -->
</body>
</html>

app.js

import style from "../css/app.css";
console.log("this is the index js .");

app.css

html,body{
    height:100%;
    margin:0;
    padding:0;
}

#app{
    position:relative;
    min-height: 100%;
    background-color:#f3f3f3;
}

#app .user-info{
	position:relative;
	height:60px;
	padding-left:60px;
}

#app .user-info .user-logo{
	position:absolute;
	left:10px;
	top:0;
	bottom:0;
	width:40px;
	height:40px;
	border-radius: 20px;
	background:url(../images/pic.jpg) center center;
	background-size:cover;
	margin:auto;
}

#app .user-info .user-name{
	height:100%;
	line-height: 60px;
	font-size:14px;
	color:#8592a3;
}