初探webpack

  大前端时代早已到来！还满足于传统的前端编程方式，是会被淘汰滴~所以呢！必须要跳出舒适区！！！去学习~去探索~

  虽说目前在不少项目内使用到VUE2.x，但在构建项目时局限还是很大的。想要得到较好的发展，就必须要走在前列，要走在前列大前端的核心的知识还是得逐一去突破的。前几天vue-cli3发布了，尝试后发现并不难，然并不满足于此。决定去深入学习一下webpack。刚好在入职中软后因种种原因，只得在中软某个办公场所内办公——没有任务/只有自学or睡觉，据领导说大约还有俩周才能去项目场地去办公。得此时机便记录一下所学习的webpack。

学习webpack前的准备

  在开始之前，请确保安装了 Node.js 的最新版本。

webpack基础方法

    
        npm install webpack webpack-cli webpack-dev-server -g
        npm init -y
    

• 在创建webpack项目之前首先要安装全局的webpack/webpack-cli/webpack-dev-server
• 使用 npm init -y 快速创建package.json文件

webpack.dev.js 配置

在webpack4中不需要配置文件的情况下，也可执行打包任务。但也可编写webpack.dev.js配置webpack打包任务。

    
        const path = require('path');

        module.exports = {
            entry: {
                main: './src/main.js'
            },
            mode: 'development',
            output: {
                filename: '[name].js',
                path: path.resolve(__dirname, '../dist'),
                publicPath: '/'
            }
        }
    

entry 入口

• 可以有多个入口，包涵在数组内

  mode 打包环境

• development 开发环境——未压缩
• production 生产环境——压缩

  output 出口

• 只能有一个
• publicPath: 不进行配置的话，页面找不到打包后的js。
  直接在dos控制台输入webpack即可打包。

使用webpack-dev-server服务

• 在使用webpack-dev-server服务之前，需要局部安装
  webpack/webpack-cli/webpack-dev-server

    
        npm install webpack webpack-dev webpcak-dev-server --save-dev
    

配置webpack-dev-server服务

配置webpack-dev-server服务只需在基础代码上添加devServer属性即刻。

    
        const path = require('path');

        module.exports = {
            entry: {
                main: './src/main.js'
            },
            mode: 'development',
            output: {
                filename: '[name].js',
                path: path.resolve(__dirname, '../dist'),
                publicPath: '/'
            },
            devServer: {
                contentBase: 'dist',
                overlay: true
            }
        }
    

devServer: 配置webpack-dev-server服务；

• contentBase: 配置服务打开后默认地址，不配置的话打开后显示的是根目录。
• overlay: 在页面内显示编码错误，不进行配置只会在dos内显示。

启动webpack-dev-server服务

• dos内输入： webpack-dev-server –config=‘配置文件地址’

    
        webpack-dev-server --config=config/webpack.dev.js
    
  

配置NPM快捷启动方式

• 在package.json内scripts方法下即可配置快捷启动方式。
• 快速启动webpack-dev-server服务
  “start”: webpack-dev-server –config=‘配置文件地址’
  dos内输入：npm run start 即可启动webpack-dev-server服务
• 快速打包
  “build”: webpack –config=‘配置文件地址’
  dos内输入：npm run build 即可打包文件

加载html文件

如果需要在入口文件加载html，则需要引入html-loader/extract-loader/file-loader。

    
        npm install html-loader extract-loader file-loader --save-dev
    

• html-loader: 查找后缀为html的文件。
• extract-loader：分离html文件。
• file-loader: 为文件重命名。

    
        const path = require('path');

        module.exports = {
            entry: {
                main: './src/main.js'
            },
            mode: 'development',
            output: {
                filename: '[name].js',
                path: path.resolve(__dirname, '../dist'),
                publicPath: '/'
            },
            devServer: {
                contentBase: 'dist',
                overlay: true
            },
            module: {
                rules: [
                    {
                        test: /\.html$/,
                        use: [
                            {
                                loader: 'file-loader',
                                options: {
                                    name: '[name].index'
                                }
                            },
                            {
                                loader: 'extract-loader'
                            },
                            {
                                loader: 'html-loader'
                            }
                        ]
                    }
                ]
            }
        }