針對新手入門搭建項目,Webpack5 配置手冊(從0開始)javascript
1. `npm init -y`,初始化包管理文件 package.json 2. 新建src源代碼目錄 3. 新建index.html 4. `yarn add webpack webpack-cli`,安裝webpack相關包 5. 在項目根目錄中,建立webpack.config.js 的配置文件 6. `yarn add webpack-dev-server`,安裝支持項目自動打包的工具,並配置 7. `yarn add html-webpack-plugin`,安裝生成預覽頁面插件並配置 8. `yarn add style-loader css-loader`,安裝處理css文件的loader 9. `yarn add less-loader less`,安裝處理less文件的loader 10. `yarn add sass-loader node-sass`,安裝處理scss文件的loader 11. `yarn add postcss postcss-loader postcss-preset-env autoprefixer`,配置postCSS自動添加css的兼容前綴(可選) 12. `yarn add url-loader file-loader`,安裝處理css文件中的圖片和字體文件 13. `yarn add html-loader`,安裝處理html文件中的圖片和字體文件 14. `yarn add @babel/core babel-loader @babel/preset-env 前面3個是必須的,後面的看須要 @babel/plugin-transform-runtime @babel/plugin-proposal-class-properties`,安裝處理js高級語法(ES6以上) 15. 以後看下面的插件安裝代碼。
yarn add html-webpack-plugin yarn add style-loader css-loader yarn add less-loader less yarn add sass-loader node-sass yarn add url-loader file-loader yarn add html-loader yarn add @babel/core babel-loader @babel/preset-env 前面3個是必須的,後面的看須要 @babel/plugin-transform-runtime @babel/plugin-proposal-class-properties yarn add postcss postcss-loader postcss-preset-env yarn add mini-css-extract-plugin yarn add optimize-css-assets-webpack-plugin yarn add eslint eslint-loader eslint-webpack-plugin yarn add eslint-config-airbnb-base 或 eslint-config-airbnb 或 vue的eslint yarn add clean-webpack-plugin
使用npx babel-upgrade
將全部關於babel的插件都升級都最新版本以適應兼容性css
{ "presets": ["@babel/preset-env"], "plugins": [ "@babel/plugin-transform-runtime", "@babel/plugin-proposal-class-properties" ] }
const path = require('path'); const htmlWebpackPlugin = require('html-webpack-plugin'); const { CleanWebpackPlugin } = require('clean-webpack-plugin'); module.exports = { mode: 'development', entry: path.join(__dirname, './src/main.js'), output: { path: path.join(__dirname, './dist'), filename: 'bundle.js', }, // 插件 plugins: [ // html new htmlWebpackPlugin({ template: path.join(__dirname, './src/index.html'), filename: 'index.html', }), // 打包前清除dist new CleanWebpackPlugin(), ], // Loaders 部分 module: { rules: [ { // test設置須要匹配的文件類型,支持正則 test: /\.css$/, // use表示該文件類型須要調用的loader use: ['style-loader', 'css-loader'], }, { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'], }, { test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'], }, { test: /\.(png|gif|bmp|jpg)$/, use: { loader: 'url-loader', options: { limit: 8 * 1024, // 圖片取10位hash和文件擴展名 name: '[hash:10].[ext]', // 關閉es6模塊化 esModule: false, // 圖片資源的輸出路徑 outputPath: 'images', }, }, }, // 處理html中img資源 { test: /.\html$/, loader: "html-loader" }, // 處理其餘資源(通常指的就是字體資源等) // { // exclude: /\.(html|js|css|less|scss|jpg|png|gif)/, // loader: "file-loader", // outputPath:'media' // }, { test: /\.(woff(2)?|eot|ttf|otf|svg|)$/, type: 'asset/inline', }, { test: /\.js/, exclude: /node_modules/, use: { loader: 'babel-loader', options: { presets: ['@babel/preset-env'], plugins: ['@babel/plugin-proposal-class-properties'], }, }, }, ], }, // 使用webpck-dev-server時配置 devServer: { historyApiFallback: true, contentBase: path.join(__dirname, './dist'), open: true, hot: true, quiet: true, port: 3000, }, };
const { resolve } = require('path'); const MiniCssExtractPlugin = require('mini-css-extract-plugin'); const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const ESLintPlugin = require('eslint-webpack-plugin'); // 導入每次刪除文件夾的插件 const { CleanWebpackPlugin } = require('clean-webpack-plugin'); // 複用loader加載器 const commonCssLoader = [ MiniCssExtractPlugin.loader, 'css-loader', // css兼容性處理 // 還須要在package.json中定義browserlist 'postcss-loader' // 下面是根據路徑找配置文件 // { // loader: 'postcss-loader', // options: { // postcssOptions:{ // config:'./postcss.config.js' // } // } // } ]; // 定義node.js到環境變量,決定使用browserslist的哪一個環境 process.env.NODE_ENV = 'production'; module.exports = { entry: './src/main.js', output: { filename: 'js/bundle.js', path: resolve(__dirname, 'dist') }, module: { rules: [ { test: /\.css$/, use: [ ...commonCssLoader, ] }, { test: /\.less$/, use: [ ...commonCssLoader, 'less-loader' ] }, // { // // eslint語法檢查,在package.json中eslintConfig --> airbnb的校驗規則 // test: /\.js$/, // exclude: /node_modules/, // // 優先執行,先執行eslint在執行babel // enforce: 'pre', // loader: 'eslint-loader', // options: { // fix: true // } // }, { // js代碼兼容性處理 test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader', options: { presets: [ ['@babel/preset-env', //基礎預設 { useBuiltIns: 'usage', // 按需加載 corejs: { version: 3 }, targets: { // 兼容到什麼版本到瀏覽器 chrome: '60', firefox: '50', ie: '9', safari: '10', edge: '17' } } ]], plugins: ['@babel/transform-runtime','@babel/plugin-proposal-class-properties'], } }, { test: /\.(png|gif|bmp|jpg)$/, use: { loader: 'url-loader', options: { limit: 8 * 1024, // 圖片取10位hash和文件擴展名 name: '[hash:10].[ext]', // 關閉es6模塊化 esModule: false, // 圖片資源的輸出路徑 outputPath: 'images', // publicPath : 這個則是生成的頁面中對圖片路徑的引用時,加上publicPath。 publicPath: "../images" } } }, // 處理html中img資源 { test: /.\html$/, loader: 'html-loader' }, // 處理其餘⽂件 { exclude: /\.(js|css|less|html|jpg|png|gif)/, loader: 'file-loader', options: { outputPath: 'media', }, }, ] }, plugins: [ // css代碼單獨抽離 new MiniCssExtractPlugin({ filename: 'css/bundle.css' }), // css代碼壓縮 new OptimizeCssAssetsWebpackPlugin(), // html文件壓縮 new HtmlWebpackPlugin({ template: './src/index.html', minify: { // 移除空格 collapseWhitespace: true, // 移除註釋 removeComments: true } }), // new ESLintPlugin({ // exclude:'node_modules', // fix:true // }), new CleanWebpackPlugin(), ] , mode: 'production' };
module.exports = { // You can specify any options from https://postcss.org/api/#processoptions here // parser: 'sugarss', plugins: [ // Plugins for PostCSS // ["postcss-short", { prefix: "x" }], "postcss-preset-env", ], };
module.exports = { root: true, env: { commonjs: true, es6: true, browser: true, node: true }, extends: [ "airbnb-base", // 'plugin:vue/essential', // '@vue/standard' ], parserOptions: { ecmaVersion: 7, ecmaFeatures: { jsx: true, experimentalObjectRestSpread: true, }, parser: 'babel-eslint', sourceType: "module" }, rules: { 'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off', 'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off' } }
node_modules/* package-lock.json dist/* .idea/*
{ "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "serve": "webpack serve", "dev": "webpack --config webpack.config.js", "build": "webpack --config webpack.pub.config.js" }, "browserslist": { "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ], "production": [ ">0.2%", "not dead", "not op_mini all" ] } }
"build": "webpack --config webpack.pub.config.js"
publicPath: "../images"
,這個class Person { static info = { name: 'zs' }; }
,在生產環境的webpack.pub.config.js中引入來插件eslint-webpack-plugin,配置了new ESLintPlugin(),