手动搭建webpack4框架（一）

手动搭建webpack4框架（一）

一：初始化 目录文件

• 创建一个文件夹（例如：test） 用 cmd 打开 执行 npm init -y 创建 package.json 文件

二：安装 webpack 和 webpack-cli

• 不建议安装全局的 webpack 和 webapck-cli
• 安装本地 webpack 和 webpack-cli 代开 cmd 跳转到 test 文件夹下执行命令：npm install webpack webpack-cli -D
• 在test 文件夹下创建src文件和 dist 文件 ，同时在 src 文件下创建 index.js 和 index.html 文件（为了测试 可在 index.js 文件中写一句输出语句）
• 执行 npx webpack就会在dist 文件下打包出一个 main.js 文件

三：实现 文件的缓存、自动打开和引入打包

• 在根目录下创建 webpack.config.js 文件，实现入口文件和出口文件的配置。

const path = require('path');
module.exports = {
    entry: {
        app: './src/index.js' //配置入口文件
    },
    output: { //配置出口文件
        filename: '[name].bundle.js', //配置输出文件名字的格式
        path: path.join(__dirname, './dist') //输出的绝对路径
    }
  }

• 为了实现文件的自动打开和热更新 我们需要安装 webpack-dev-server 执行命令 npm install webpack-dev-server --save-dev
• 在webpack.config.js文件中配置webpack-dev-server

const path = require('path');
module.exports = {
    entry: {
        app: './src/index.js' //配置入口文件
    },
    output: { //配置出口文件
        filename: '[name].bundle.js', //配置输出文件名字的格式
        path: path.join(__dirname, './dist') //输出的绝对路径
    },
    devServer: {
        contentBase: './dist',
        port: 3000, //本地服务器端口号
        hot: true, //热加载
    }
  }

• 在 package.json文件中的scripts节点下配置 "dev": "webpack-dev-server --open"，然后执行npm run dev 在 dist 目录下会自动创建出一个app.bundle.js文件
• 为了实现文件的缓存打包和自动引入 需要安装 html-webpack-plugin 执行命令npm install --save-dev html-webpack-plugin
• 在webpack.config.js中配置相关html-webpack-plugin

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin'); //实现 文件的自动打包和引入
const webpack = require('webpack');
module.exports = {
    entry: {
        app: './src/index.js' //配置入口文件
    },
    output: { //配置出口文件
        filename: '[name].bundle.js', //配置输出文件名字的格式
        path: path.join(__dirname, './dist') //输出的绝对路径
    },
    devServer: {
        contentBase: './dist',
        port: 3000, //本地服务器端口号
        hot: true, //热加载
    },
    plugins: [ //配置插件
        new HtmlWebpackPlugin({
            template: './index.html', //指定模板 html 文件
            filename: 'index.html' //输出的 HTML 文件名称
        },
        new webpack.HotModuleReplacementPlugin(), //热更新所需插件
        new webpack.NamedModulesPlugin(), //热更新所需插件
    ]
}

• 执行npm run dev会自动打开缓存中的html文件，同时创建出的app.bundle.js文件也会自动打包到html文件中去，就不用手动引入了。

四：清除缓存中上次打包出的文件

• 实际上你会发现当你每执行一次npm run dev就会打包出一个.bundle.js .html等相关文件，为了试下webpack跟踪当前使用文件的正确性，这时就需要我们安装使用clean-webpack-plugin
• 执行命令 npm install clean-webpack-plugin --save-dev
• 在webpack.config.js中配置相关clean-webpack-plugin

  plugins: [ //配置插件
        new HtmlWebpackPlugin({
            template: './index.html', //指定模板 html 文件
            filename: 'index.html' //输出的 HTML 文件名称
        },
        new webpack.HotModuleReplacementPlugin(), //热更新所需插件
        new webpack.NamedModulesPlugin(), //热更新所需插件
        new CleanWebpackPlugin({ dry: true }), //清除缓存中上一次打包的不用的文件
    ]

五：配置处理样式、图片、字体的第三方 loader

• 配置处理样式的loader 包括处理css、sass 、less
• 配置处理路径的loader 包括字体和图片
• 执行命令 npm install style-css css-loader sass-loader node-sass less less-loader file-loader --save-dev
• 在webpack.config.js中配置相关loader

   module: { //配置第三方 loader
        rules: [
            { test: /\.css$/, use: ['style-loader', 'css-loader'] }, //处理 css 文件的 loader
            { test: /\.(png|jpg|jpeg|svg|gif)$/, use: ['file-loader'] }, //处理 图片的 loader
            { test: /\.(woff|woff2|eot|ttf|otf)$/, use: ['file-loader'] }, //处理 字体的 loader
            { test: /\.scss$/, use: [{ loader: "style-loader" }, { loader: "css-loader" }, { loader: "sass-loader" }] }, //处理 sass 文件的 loader
            { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] }, //处理 less 文件的 loader
        ]
    }

六：配置相关 babel

• 用来处理ES6和ES7等高级语法
• 执行命令npm install -D babel-loader @babel/core @babel/preset-env 对ES6或ES7语法进行转化，将一些高级语法转化成低级语法。
• 执行命令npm install --save-dev @babel/plugin-proposal-class-properties 用来解析ES7中的高级语法，例如：

index.js
class A {
   a=1;
  }
  let a=new A();
  console.log(a.a);

• 执行命令npm install --save-dev @babel/plugin-proposal-decorators 用来解析类中的函数；

例如：

index.js
@log
 class A {
   a=1;
  }
  let a=new A();
  console.log(a.a);
  function log(target){
      console.log(target)
  }

• 执行命令 npm install --save-dev @babel/plugin-transform-runtime transform-runtime 安装依赖与 runtime 因此要执行命令 npm install --save @babel/runtime 用来转化某个类上的实例方法

例如：

a.js
class B{
    
}
function * gen(params){
    yield 1;
}
console.log(gen().next());

• 执行命令 npm install --save @babel/polyfill 转化实例上的方法，例如：

reqiure('@babel/polyfill');
'aaa'.includes('a');

• 在webpack.config.js中做babel的相关配置

module: { //配置第三方 loader
        rules: [
            { test: /\.css$/, use: ['style-loader', 'css-loader'] }, //处理 css 文件的 loader
            { test: /\.(png|jpg|jpeg|svg|gif)$/, use: ['file-loader'] }, //处理 图片的 loader
            { test: /\.(woff|woff2|eot|ttf|otf)$/, use: ['file-loader'] }, //处理 字体的 loader
            { test: /\.scss$/, use: [{ loader: "style-loader" }, { loader: "css-loader" }, { loader: "sass-loader" }] }, //处理 sass 文件的 loader
            { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] }, //处理 less 文件的 loader
            { test: /\.vue$/, use: ['vue-loader'] }, //处理 .vue 文件的 loader
            {
                test: /\.js$/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: [ //用 babel-loader 把 es6 转化成 es5
                            '@babel/preset-env'
                        ],
                        plugins: [
                            ['@babel/plugin-proposal-decorators', { "legacy": true }],
                            ['@babel/plugin-proposal-class-properties', { "loose": true }],
                            "@babel/plugin-transform-runtime"
                        ]
                    }
                },
                exclude: /node_modules/
            }
        ]
    },