1. Package.json
{
"name": "collection_sites",
"version": "1.0.0",
"description": "迷思爱综合导航网站",
"main": "main.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack-dev-server --config webpack.config.js",
"build": "webpack --config webpack.config.js --mode production"
},
"author": "Kuan",
"license": "ISC",
"devDependencies": {
"@babel/cli": "^7.7.7",
"@babel/core": "^7.7.7",
"@babel/preset-env": "^7.7.7",
"autoprefixer": "^9.7.3",
"babel-loader": "^8.0.6",
"babel-preset-env": "^1.7.0",
"copy-webpack-plugin": "^5.1.1",
"file-loader": "^5.0.2",
"optimize-css-assets-webpack-plugin": "^5.0.3",
"postcss-loader": "^3.0.0",
"uglifyjs-webpack-plugin": "^2.2.0",
"url-loader": "^3.0.0",
"webpack": "^4.41.5",
"webpack-cli": "^3.3.10",
"webpack-dev-server": "^3.10.1"
},
"browerslist": [
"> 1%",
"last 2 versions"
],
"dependencies": {
"@babel/polyfill": "^7.7.0",
"@nishanths/zoom.js": "^3.0.0",
"animejs": "^3.1.0",
"axios": "^0.19.1",
"clipboard": "^2.0.4",
"css-loader": "^3.4.1",
"html-webpack-plugin": "^3.2.0",
"jquery": "^3.4.1",
"mini-css-extract-plugin": "^0.9.0",
"modal": "^1.2.0",
"node-sass": "^4.13.0",
"sass-loader": "^8.0.0",
"scss": "^0.2.4",
"webpack-serve": "^3.2.0"
}
}
2. webpack.config.js
const path = require("path");
const htmlWebpackPlugin = require("html-webpack-plugin");
const miniCssExtractPlugin = require("mini-css-extract-plugin");
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
// const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const CopyPlugin = require("copy-webpack-plugin");
module.exports = {
mode: "development",
entry: path.resolve(__dirname, 'main.js'),
output: {
path: path.resolve(__dirname, 'dist'),
filename: "misiai.js",
chunkFilename: "[name].chunk.js"
},
optimization: {
minimizer: [new UglifyJsPlugin({
exclude: /\/node_modules/,
chunkFilter: (chunk) => {
// Exclude uglification for the `vendor` chunk
if (chunk.name === 'vendor') {
return false;
}
return true;
},
}),],
},
plugins: [
new CopyPlugin([{
from: path.resolve(__dirname, "src/favicon"),
to: './favicon',
// ignore: ['.*']
}]),
new htmlWebpackPlugin({
template: path.resolve(__dirname, "src/template", "index.html"),
// filename: "tutorials.html",
}),
new miniCssExtractPlugin({
// Options similar to the same options in webpackOptions.output
// all options are optional
filename: '[name].css',
chunkFilename: '[id].css',
ignoreOrder: false, // Enable to remove warnings about conflicting order
}),
new OptimizeCssAssetsPlugin({}),
],
devServer: {
contentBase: path.join(__dirname, 'dist'),
port: 3000,
open: true,
},
module: {
rules: [
{
test: /\.(png|jpg)$/,
loader: 'url-loader?limit=8192'
},
{
test: /\.(scss|css)$/i, use: [
{
loader: miniCssExtractPlugin.loader,
options: {
esModule: true,
},
},
{
loader: "css-loader",
options: {
importLoaders: 3
}
},
{
loader: 'postcss-loader',
options: {
plugins: [
require("autoprefixer") /*在这里添加*/
]
}
},
'sass-loader',
]
},
{
test: /\.(eot|woff2?|ttf|svg)$/,
use: [
{
loader: "url-loader",
options: {
name: "[name]-[hash:5].min.[ext]",
limit: 5000, // fonts file size <= 5KB, use 'base64'; else, output svg file
publicPath: "fonts/",
outputPath: "fonts/"
}
}
]
},
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,//排除掉node_module目录
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env'] //转码规则
}
}
}
]
}
};
3. postcss.config.js
module.exports = {
plugins: [
require("autoprefixer")
]
};
4. babel.config.js
const presets = [
[
"@babel/env",
{
targets: {
edge: "17",
firefox: "60",
chrome: "67",
safari: "11.1",
},
useBuiltIns: "usage",
},
],
];
module.exports = { presets };