//依赖包--package.json文件
{
"name": "webemeet",
"version": "1.0.0",
"description": "",
"main": "index.js",
"dependencies": {
"cnpm": "^6.1.0",
"expose-loader": "^0.7.5",
"html-loader": "^0.5.5",
"jquery": "^3.4.1"
},
"devDependencies": {
"@babel/core": "^7.5.5",
"@babel/preset-env": "^7.5.5",
"autoprefixer": "^9.6.1",
"babel": "^6.23.0",
"babel-core": "^6.26.3",
"babel-loader": "^7.1.5",
"bootstrap": "^3.4.1",
"clean-webpack-plugin": "^3.0.0",
"css-loader": "^3.1.0",
"extract-text-webpack-plugin": "^4.0.0-beta.0",
"file-loader": "^4.1.0",
"html-webpack-plugin": "^3.2.0",
"less": "^3.9.0",
"less-loader": "^5.0.0",
"mini-css-extract-plugin": "^0.8.0",
"postcss-loader": "^3.0.0",
"raw-loader": "^3.1.0",
"style-loader": "^0.23.1",
"url-loader": "^2.1.0",
"webpack": "^4.38.0",
"webpack-cli": "^3.3.6",
"webpack-dev-server": "^3.7.2"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack --mode production",
"serve": "webpack-dev-server --mode development"
},
"author": "",
"license": "ISC"
}
webpack.config.js :( heat load configuration, compile less. and other common functions are)
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const webpack = require("webpack");
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const {
CleanWebpackPlugin
} = require("clean-webpack-plugin")
var path = require('path');
module.exports = {
// index2: './src/js/entry2.js'
entry: {
index: path.resolve(__dirname, './src/index/indexentry.js'),
About: path.resolve (__ dirname, './src/about/aboutentry.js' ),
},
Output: { // Output file
// filename:' The index.js', output file name //
filename: './ JS / [name] .js ' ,
path: path.resolve (__ dirname, ' dist ' ),
// publicPath:' static ', // output directory file parsing, url HTML page with respect
@ publicPath: __dirname +' / out ', // add static resources, there would be wrong path
},
Module: {
rules: [ // extract local html files directly referenced in
{
the Test: /\.html$/ ,
Loader: ' html-Loader '
},
{
Test: /.js$/ ,
use: [ 'Babel-Loader' ]
},
// {
// Test: /.css$/,
// use: [ 'style-Loader', 'CSS-Loader ']
// }
// / * css parsing, and add to the style css html tag's * /
// {
// Test: /.less$/,
@ use: [' style-Loader ',' Loader-css', 'less-Loader']
// },
// / * less resolved, the browser can be parsed into less recognizable language css * /
{
Test: /\.css$/ ,
// include: [path.resolve(__dirname, 'src')],
use: [
MiniCssExtractPlugin.loader,
'css-loader',
{
loader: 'postcss-loader',
options: {
outputPath: './css/',
plugins: [require('autoprefixer')]
}
}
]
},
{
test: /\.less$/,
use: [
MiniCssExtractPlugin.loader,
'css-Loader' ,
{
Loader: 'postcss-Loader' ,
Options: {
OutputPath: './css/' ,
plugins: [the require ( 'autoprefixer')] // Add the browser prefix css
}
},
'less-Loader'
]
},
// {
// Test: /.(jpg|png|gif|svg)$/,
// use:?. [ 'URL Loader-name = & limit = 8192 / [name ]. [ext] ']
// },
{
Test: /\.(png|jpg|gif)$/ ,
use: [{
Loader: 'URL-Loader' ,
Options: {
OutputPath: 'images /', // output images folder to
limit: 500 // is the file is smaller than 500B of labeled format Base64, write, JS
}
}]
},
/ * parse pictures * /
{
the Test: . / \ (WOFF | woff2) (\ v = \ d + \ \ d + \?.. \ + D) $ /? ,
use: [ 'URL-Loader' ]
},
{
Test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/ ,
use: [ 'URL-Loader' ]
},
{
Test: /\.eot(\?v= \ D + \ \ + D \ \ + D) $ /..? ,
use: [ 'URL-Loader' ]
},
{
Test: /\.svg(\?v=\d+\.\d+\.\d+)? $ / ,
use: [ 'URL-Loader' ]
}
]
},
plugins: [
// extract content between a plurality of common to a common chunk chunk
// new new webpack.optimize.CommonsChunkPlugin ({
// name: 'Common',
// of chunks are: [ 'index', 'index2'],
// minChunks: 2,
// }),
/ * package build html file * /
new new HtmlWebpackPlugin ({
filename: 'index. html ', // configuration output file name and path
Template:' ./src/index/index.html ', // arranged to be compiled html files
of chunks are: [' index ' ],
// of chunks are: [' index ', "Vendor", "Common"],
// favicon for: './ the src / IMG / Apple-Touch-icon.png
// inject:' head ', // [JS | CSS] implanted into the body section
/ *Compression html ................................................ .................................................. ................................................ * /
the hash: to true ,
// compression => production mode using
Minify: {
removeAttributeQuotes: to true , // delete double quotes
collapseWhitespace: to true // folding line of html
},
/ * ............. .................................................. .................................................. ................................. * /
}),
new newHtmlWebpackPlugin ({
filename: 'about.html', // configuration output file name and path
Template: './src/about/about.html', // configuration file to be compiled html
Inject: 'head', // [ js | css] implanted into the body portion
of chunks are: [ 'About' ],
// of chunks are: [ 'index2', "Vendor", "Common"],
/ * compression HTML ............ .................................................. .................................................. .................................. * /
the hash: to true ,
// compression => production mode using
minify: {
removeAttributeQuotes: to true , // delete double quotes
collapseWhitespace: to true // folding line of html
},
/ * ............................ .................................................. .................................................. .................. * /
}),
new new MiniCssExtractPlugin ({
filename: '[name] .css' ,
chunkFilename: '[ID] .css'
}),
new new CleanWebpackPlugin (),
new new webpack.ProvidePlugin ({
$: 'jQuery',
The jQuery: 'jQuery' ,
}),
new new ExtractTextPlugin ( "CSS / [name] [contenthash] .css." ),
New new webpack.HotModuleReplacementPlugin () // hot update widget
],
MODE: 'Development', // set the MODE
// Optimization: {
// splitChunks: {
// cacheGroups: {
// Commons: {
// // pulled write their own common code
// of chunks are: 'Initial',
// name: 'the common', // after the package file name, any name
// minChunks: 2, // 2 times the minimum reference
// the minSize: 0 // 0 bytes long beyond a new packet is generated
// },
// Styles: {
// name: 'Styles', // common style detached
@ Test: /\.css$/,
@ of chunks are: 'All',
@ minChunks: 2,
@ Enforce: to true
// },
// Vendor: {
// // third-party plug pulled
// test: / node_modules /, // specified third party package under the node_modules
// of chunks are: 'Initial',
// name: 'vendor', the file name // packed, arbitrarily named
// // set priorities, and to prevent self-defined common code extracted is covered, not packaged
@ priority: 10
// },
// }
// }
// },
devserver: {
before (App, Server, Compiler) {
const watchFiles = [ '.html', 'the .less' ];
compiler.hooks.done.tap ( 'DONE', () = > {
const changedFiles = Object.keys (compiler.watchFileSystem.watcher.mtimes);
IF (
the this .hot &&
changedFiles.some (filePath => watchFiles.includes (path.parse (filePath) .ext))
) {
server.sockWrite (server.sockets, 'Content-changed' );
}
})
},
Host: 'localhost', / / server IP address, can be localhost
the compress: to true , // server-side compression is turned on
open: to true , // automatically open the browser
hot: to true , // turn on hot update
Port: 8888 ,
hotOnly: to true
}
}
File Directory:
