webpack前端简单配置

每次用webpack创建项目时，总是要安装一堆包，还要配置一系列文件解析规则，webpack打包规则等，烦不胜烦。网上找的很多webpack配置里面很多里面的配置或者引入包都是被弃用的，因此自己总结了一套简便配置，根据自己的项目需求在此基础上添加或者修改就可以。

目录结构

步骤

1. 首先进入到项目文件夹根目录中，创建名为src的文件夹，在src文件夹下创建index.html和main.js的文件
2. 在terminal中输入npm init -y命令，生成初始化package.json文件
3. 配置package.json文件
4. 输入npm install命令安装依赖包
5. 创建名为.babelrc的文件，配置babel规则
6. 创建名为webpack.config.js的文件，配置开发环境webpack配置
7. 创建名为webpack.publish.config.js的文件，配置发布的webpack配置

使用

• main.js作为入口文件，引入各个组件和依赖
• 在terminal中输入npm run dev命令启动本地服务器环境
• 在terminal中输入npm run pub进行项目打包发布

package.json文件配置

{
  "name": "demo1",
  "version": "1.0.0",
  "description": "",
  "main": "webpack.config.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server --hot",
    "pub": "webpack --config webpack.publish.config.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@babel/core": "^7.7.5",
    "@babel/plugin-proposal-object-rest-spread": "^7.7.4",
    "@babel/plugin-transform-modules-commonjs": "^7.7.5",
    "@babel/plugin-transform-runtime": "^7.7.6",
    "@babel/plugin-transform-strict-mode": "^7.7.4",
    "@babel/preset-env": "^7.7.6",
    "@babel/runtime": "^7.7.6",
    "babel-loader": "^8.0.6",
    "babel-preset-mobx": "^2.0.0",
    "moment": "^2.24.0",
    "node-sass": "^4.13.0",
    "url-loader": "^3.0.0",
    "webpack": "^4.41.2",
    "webpack-dev-server": "^3.9.0"
  },
  "devDependencies": {
    "clean-webpack-plugin": "^3.0.0",
    "css-loader": "^3.3.0",
    "file-loader": "^5.0.2",
    "html-webpack-plugin": "^3.2.0",
    "sass-loader": "^8.0.0",
    "style-loader": "^1.0.1",
    "webpack-cli": "^3.3.10"
  }
}

.babelrc文件配置

{
    "presets": ["@babel/preset-env", "mobx"],
    "plugins": [
        "@babel/plugin-proposal-object-rest-spread",
        "@babel/plugin-transform-runtime",
        ["@babel/plugin-transform-modules-commonjs", { "strictMode": false }]
    ]
}

webpack.config.js文件配置

const path = require('path');
const webpack = require('webpack');
const htmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry:path.join(__dirname,'./src/main.js'),
    output:{
        path:path.join(__dirname,'./dist'),
        filename:'bundle.js'
    },
    plugins:[
        new htmlWebpackPlugin({
            template:path.join(__dirname,'./src/index.html'),
            filename:'index.html'
        }),
    ],
    module: {
        rules: [
            {test: /\.css$/,use: [ "style-loader", "css-loader"]},
            {test: /\.scss$/,use: [ "style-loader", "css-loader", "sass-loader"]},
            {test: /\.(jpg|png|gif|bmp|jpeg)$/, use: 'url-loader?limit=10000&name=[hash:8]-[name].[ext]'},
            {test: /\.(ttf|eot|svg|woff|woff2)$/, use: 'url-loader' }, 
            {test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ }, // 配置 Babel 来转换高级的ES语法
        ]
    }
};

webpack.publish.config.js文件配置

const path = require('path');
const webpack = require('webpack');
const htmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = {
    entry:{
        app: path.join(__dirname,'./src/main.js')
    },
    output:{
        path:path.join(__dirname,'./dist'),
        filename:'bundle.js'
    },
    plugins:[
        new htmlWebpackPlugin({
            template:path.join(__dirname,'./src/index.html'),
            filename:'index.html'
        }),
        new CleanWebpackPlugin(),
    ],
    module: {
        rules: [
            {test: /\.css$/,use: [ "style-loader", "css-loader"]},
            {test: /\.scss$/,use: [ "style-loader", "css-loader", "sass-loader"]},
            {test: /\.(jpg|png|gif|bmp|jpeg)$/, use: 'url-loader?limit=10000&name=images/[hash:8]-[name].[ext]'},
            {test: /\.(ttf|eot|svg|woff|woff2)$/, use: 'url-loader' }, 
            {test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ }, // 配置 Babel 来转换高级的ES语法
        ]
    },
    optimization: {
        splitChunks: {
            cacheGroups: {
                vendor: {
                    name: "vendor",
                    test: /[\\/]node_modules[\\/]/,
                    chunks: "all",
                    priority: 10 // 优先级
                },
                common: {
                    name: "common",
                    test: /[\\/]src[\\/]/,
                    minSize: 1024,
                    chunks: "all",
                    priority: 5
                }
            }
        }
    }
};