webpack配置及使用技巧

webpack配置及使用技巧

文章源码下载

webpack 打包工具

压缩代码  JS 混淆代码

浏览器不支持 ES6 ES7 ES8语法特性
webpack -> 安装一系列的依赖包解决  翻译  编译  转换

less sass  CSS结构化 逻辑化
webpack -> 依赖处理less sass  -> css 编译转换打包

HTML压缩  模板  ejs pug

自动化方案 webpack

开发过程中 实时的编译 webpack-dev-server

npm init

> package name: (wp_learning)
> version: (1.0.0) 0.0.1
> description: Webpack study
> entry point: (index.js)
> test command:
> git repository:
> keywords: webpack
> author: ZLJ
> license: (ISC) MIT

First step:
三件套
webpack
webpack-cli
webpack-dev-server

Second step:
处理JS -> ES6 ES7 ES8  装饰器

六件套

babel-loader@7
babel-core
babel-preset-env

babel-plugin-transform-runtime

babel-plugin-transform-decorators
babel-plugin-transform-decorators-legacy


Thrid step:
处理  sass -> css -> style

四大件

sass-loader
node-sass
css-loader
style-loader

Fourth step:
处理模板 ejs-loader

fifth step:
处理HTML
html-webpack-plugin

--save-dev		-D
安装在开发环境下的

--save         -S
安装在生产环境下的     ejs

 npm i -D webpack webpack-cli webpack-dev-server babel-loader@7 babel-core babel-preset-env babel-plugin-transform-runtime babel-plugin-transform-decorators babel-plugin-transform-decorators-legacy sass-loader node-sass css-loader style-loader ejs-loader html-webpack-plugin --registry=https://registry.npm.taobao.org
 
 跟教程一样输了一长串 报错 于是决定按照教程的版本 一个一个安装
  npm i babel-core@6.26.3 -D
 npm i babel-loader@7.1.5 -D
 npm i babel-plugin-transform-decorators@6.24.1 -D
 npm i babel-plugin-transform-decorators-legacy@1.3.5 -D
npm i babel-plugin-transform-runtime@6.23.0 -D
 npm i css-loader@3.4.2 -D
npm i ejs-loader@0.3.5 -D
 npm i html-webpack-plugin@3.2.0 -D
 npm i node-sass@4.13.1 -D  报错
 npm i sass-loader@8.0.2 -D
 npm i style-loader@1.1.3 -D
 npm i webpack@4.41.5 -D
 npm i webpack-cli@3.3.10 -D
 npm i webpack-dev-server@3.10.1 -D

npm i node-sass@4.13.1 -D  报错 
这里我的报错是缺少python2
参考博客：从根本上解决npm install时，node-sass 报错缺少python2
使用命令npm i node-sass@4.13.1 --ignore-scripts -D安装成功

懒得输入这么多的命令 可以拿到我的package.json文件 npm install即可

{
  "name": "wp_learning",
  "version": "0.0.1",
  "description": "Webpack study",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [
    "webpack"
  ],
  "author": "ZLJ",
  "license": "MIT",
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    "babel-plugin-transform-decorators": "^6.24.1",
    "babel-plugin-transform-decorators-legacy": "^1.3.5",
    "babel-plugin-transform-runtime": "^6.23.0",
    "css-loader": "^3.4.2",
    "ejs-loader": "^0.3.5",
    "html-webpack-plugin": "^3.2.0",
    "node-sass": "^4.13.1",
    "sass-loader": "^8.0.2",
    "style-loader": "^1.1.3",
    "webpack": "^4.41.5",
    "webpack-cli": "^3.3.10",
    "webpack-dev-server": "^3.10.1"
  }
}

安装了这些依赖之后，我们要使用，所以要配置，新建webpack.config.js文件

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

module.exports = {
    mode: 'development', // development  production,
    entry: {  // 入口文件
        index: path.resolve(__dirname, './src/js/index.js')
    },
    output: {
        path: path.resolve(__dirname + '/dist'),
        filename: 'js/[name].js'
    },
    module: {
        rules: [ // 配置规则
            {
                test: /\.js$/,
                loader: 'babel-loader',
                exclude: path.resolve(__dirname, 'node_modules'), // 排除掉node_modules下的js
            },
            {
                test: /\.css$/,
                use: [ // 多个依赖 所以用use
                    'style-loader',
                    'css-loader'
                ]
            },
            {
                test: /\.scss$/,
                use: [ // 依赖是从下到上使用
                    'style-loader',
                    'css-loader',
                    'sass-loader'
                ]
            },
            {
                test: /\.tpl$/, // 对模板的处理
                loader: 'ejs-loader'
            }

        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            filename: 'index.html',
            template: path.resolve(__dirname, './src/index.html'),
            chunks: ['index'], // 入口
            excludeChunks: ['node_modules']
        })
    ],
    devServer: {
        open: true,
        host: 'localhost',
        port: 3300
    }
}

package.json配置启动命令

 "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server --config webpack.config.js",
    "webpack": "webpack --config webpack.config.js"
  },

出现以上报错 是因为我的node版本是17.3.0 过高 切换一下node版本再运行一下

再次运行成功了

终端输入webpack可以打包成功