webpack如何配置

一，什么是webpack，它的作用是什么？

可以看作是一个模块打包机，它的作用是将 ts .vue es6中modules  sass等转为浏览器识别的文件还可以实现文件压缩和合并，服务器的搭建，热更新等。

二，工作原理：

将整个项目作为一个整体，通过给定一个主文件（如main.js），webpack将从这个文件开始找到项目所需的所有依赖，并使用loaders将他们打包成一个或多个浏览器可以识别的js文件。

注意：全局安装webpack npm install webpack@3.6.0 -g（对于初学者建议安装4.0以下的版本，4以上的很多坑。

三，使用流程

1，npm init -y 初始化一个node包

2，局部安装 npm install webpack@3.6.0 --save-dev 如果终端提示不能安装同一个名包，可以使用npm link webpack命令（前提是webpack已全局安装）

3，建一个webpack.config.js文件

4在该文件里实现配置

5，配置入口文件路径 出口文件路径

 6.配置出口文件，入口文件

7，配置插件，初始化插件html-webpack-plugin

 001，安装 npm install  html-webpack-plugin@2.30.1

002,引入并实例化进行配置

 注意：如需在模板中调用htmlWebpackPlugin中的参数 可用以下方法 <%= htmlWebpackPlugin.options.属性名 %>

 8，配置babel

001，首先npm install --save-dev @babel/core babel-loader @babel/preset-env @babel/preset-react

002，安装css的loader

npm install --save-dev style-loader css-loader  sass-loader node-sass

注意：应当结合自己的node版本 webpack版本安装以上合适的版本，否则为出现较多坑

以下是我针对webpack3.6.0 html-webpack-plugin@2.30.1 node14版本安装的一些插件版本；

 具体配置如下：

9，热更新

 001，全局安装 npm install webpack-dev-server@2 -g

002，在package.json中的script里增加启动命令

 003，启动项目npm run start

10,webpack实现跨域

代码如下

 

 以上就实现了简单的webpack配置。

以下是配置文件中完整的代码：

webpack.config.js

const path = require('path')
const HtmlWebpackPlugins = require('html-webpack-plugin')
// 配置入口出口文件夹

const PATH = {
    app: path.resolve(__dirname, './src/main.js'),
    build: path.join(__dirname, './dist')
}

module.exports = {
    entry: {
        aa: PATH.app
    },
    output: {
        filename: '[name].js',
        path: PATH.build
    },
    plugins: [
        new HtmlWebpackPlugins({
            title: '总要离开的',
            template: 'index.html',
            filename: 'index.html'
        })
    ],
    module: {
        rules: [
            {
                test: /\.(js |jsx)$/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ["@babel/env", "@babel/react"]
                    }
                },
                // 处理不需要编译的文件，否则编译很慢
                exclude: __dirname + 'node_modules/',
                include: __dirname + 'src'
            },
            {
                test: /\.(css|scss)$/,
                use: ['style-loader', 'css-loader', 'sass-loader']
            },
            // {
            //     test:/\.html$/,
            //     loader:'html-loader'
            // },
        ]

    },
    devServer: {
        proxy: {
            "/api": {
                target: 'https://www.vue-js.com',
                changeOrigin: true,
                ws: true,
                Pathrewrite: {
                    '^/api': ''
                },
            }
        }
    }
}