webpack搭建工程项目

初始化 （大家有什么问题或者我说的不对可以提出或帮我纠正，谢谢）

1. 使用npm init初始化项目

2. 构建工程目录

   • dist: 输出目录，该目录保存最终运行的代码。
   • src: 源码目录，该目录保存开发期间编写的所有源码。
     • assets: 嵌入式静态资源，该目录保存需要用到的各种嵌入式静态资源，如图片，css,字体图标的名号。
     • 其他独立功能模块目录：为不同的功能模块创建不通的子目录
     • conmmon：公共模块目录，该目录保存被所有独立功能模块使用的模块。
   • public：页面模块所在的目录，该目录保存页面模块。

3. 安装webpack npm install webpack webpack-cli -g全局安装有一点不好就是维护版本不好。
   npm i -D webpack webpack-cli和上面一样，这个规定了开发依赖

4. 创建webpack.config.js 配置文件：里面需要module.exports = {}方式配置

   • 配置mode为development development为开发环境，Production为生产环境

5. 在npm中分别开启脚本在scripts配置

   • start : 目前没有
   • build : webpack

6. 执行构建命令npm run build

配置入口和出口

需要根据实际情况进行配置

目前的工程有两个页面，如果尾每个页面仅需引用一个JS，则最终需要生成两个JS，分别是list和detail

按照目录的邀请，配置两个入口

{
    "entry" : {
        "list" : "...",
        "detail" : "..."
    }
}

为了反映文件内容的变化，配置出口规则，输出文件格式为入口名称-5位哈希.js,并把js放置到出口目录的scripts在

按照目前要求，配置出口规则

{
    "output" : {
        "filename" : "scripts/[name]-[hash:5].js"    
    }
}

清理输出目录

为了保证每次构建时清理输出目录，使用插件 clean-webpack-plugin
开发依赖下载 npm i -D clean-webpack-plugin

输出模板文件（我们编写的页面不需引入js和css让webpack帮我们引入）

使用插件 html-webpack-plugin 将public文件夹中的模板生成到输出目录

开发依赖下载 npm i -D html-webpack-plugin

webpack配置的时候一定是js为入口的。

所有要用到css的话要在js文件中引入

以上可以实现基本导入

处理 css 依赖

使用加载器 css-loader 处理css依赖

然后使用加载器 mini-css-extract-plugin 让css变成文件输出目录里面

var MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
    module: {
        rules: [
            {
                test: /\.css$/i,
                use: [
                    {
                        loader: MiniCssExtractPlugin.loader,
                        options: {  // 导入的目录在根目录
                            publicPath: "../"
                        }
                    },
                    'css-loader',
                ],
            },
        ],
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: 'css/[name]-[hash:5].css'
        })
    ]
}

处理图片文件

使用 url-loader

module:{
    rules:[
        {
            test: /\.(png|jpg|gif)$/i,
            use: [
                {
                    loader: 'url-loader',
                    options: {
                        limit: 8192,
                        name: "imgs/[name]-[hash:5].[ext]"
                    },
                },
            ],
        }
    ]
}

则上面要是说要用什么依赖的话则就直接下载就行了。

开发服务器

安装插件 webpack-dev-server

配置端口

devServer: {
  port: 9000, // 端口
  contentBase : 'dist',
  openPage: "list.html", // 打开页面
  open: true,   //  启动后是否打开
  quiet: true // 安静一点不要在控制台打印太多东西
}

配置 npm scripts 的start脚本：webpack-dev-server

• 运行 npm run start

添加babel （将高版本的js代码编译成低版本的）

安装babel

npm i -D @babel/core babel-loader

配置：

module:{
    rules:[ 
        {
            test:/\.js/, 
            use: {
                loader:"babel-loader" 
            }
        }
    ]
}

很多时候
开发阶段：会跨域，有跨域问题
生产环境：不会跨域，没有跨域问题

配置代理

ajax请求地址：http://101.132.72.36:5100/api/local

为解决开发期间直接请求造成的跨域问题，可在开发期间配置代理服务器

devServer: {
  port: 9000,
  openPage: "list.html",
  open: true,
  quiet: true,
  proxy: {
      "/api": "http://101.132.72.36:5100"
  }
}

配置文件webpack.config.js

const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
    mode: "development",
    entry: {
        detail: "./src/detail/index.js",
        list: "./src/list/index.js"
    },
    output: {
        "filename": "scripts/[name]-[hash:5].js"
    },
    module: {
        rules: [
            {
                test: /\.css$/i,
                use: [{
                        loader: MiniCssExtractPlugin.loader,
                        options: {
                            publicPath: "../"
                        }
                    }, "css-loader"]
            },
            {
                test: /\.(png|jpg|gif)$/i,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            limit: 8192, // 没超过8192字节则使用bate64编码，超过则生成文件
                            name: "imgs/[name]-[hash:5].[ext]" // 生成的文件名
                        },
                    },
                ],
            },
            {
                test : /\.js$/i,
                use : ["babel-loader"]
            }
        ]
    },
    plugins: [
        new CleanWebpackPlugin(),
        new MiniCssExtractPlugin({
            filename: 'css/[name]-[hash:5].css'
        }),
        new HtmlWebpackPlugin({
            filename: "list.html", // 输出文件名
            template: "./public/list.html", // 模板文件
            chunks: ['list'] // 引入什么js
        }),
        new HtmlWebpackPlugin({
            filename: "detail.html", // 输出文件名
            template: "./public/detail.html", // 模板文件
            chunks: ['detail'] // 引入什么js
        }),
    ],

    devServer : {
        port : 9900,
        contentBase : 'dist',
        openPage : "list.html",
        open : true,
        quiet : true,
        proxy : {
            "/api": "http://101.132.72.36:5100"
        }
    }
}

下面的jQuery你是否了解？
cityService.js

list.js

detail.js