Webpack简易使用

1.webpack介绍

Webpack 是一个前端资源加载/打包工具，可以根据配置将项目模块打包成静态资源。
webpack官网文档

2.webpack安装

    1).安装webpack前一定要安装node.js

        (1).安装node.js

nodejs下载地址

然后next到底

        (2).测试是否安装正确

在cmd中输入node -v

    2).全局安装webpack

npm install webpack -g

也可以只在项目中安装
npm install webpack --save-dev

    3).全局安装webpack-cli

npm install webpack-cli -g

也可以只在项目中安装
npm install webpack-cli --save-dev

3.使用webpack

    1).使用webpack的配置文件打包

        (1).新建一个目录webpackTest,在此目录下新建个src文件夹和webpack.config.js和index.js

        (2).在index.js写入简单的语法

        (3).在webpack.config.js写入配置

在webpack.config.js用的是CommonJs语法

/**
 * 必须使用CommonJs规范
 * 更多高级用法：https://www.webpackjs.com/concepts/output/
 */
 const path = require("path");//当前文件的目录

module.exports = {
    mode: 'development',
    entry: {
       index : "./src/index.js"//打包来源的位置
    },
    output: {
        path: path.resolve(__dirname, "dist"), // 打包文件的输出目录
           filename: "[name].js" //根据entry的名称在dist中生成相应的名称的js文件
    }

}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

        (4).在根目录下执行webpack命令

    2).webpack的模块使用（Loader）

因为webpack只能处理js/json资源，但是在开发中还需要需要加载css、img，将ES6转成ES5代码，将TypeScript转成ES5代码，将scss、less转成css，将.jsx、.vue文件转成js文件等功能，所以就需要使用到Loader。使用相关的功能只要下载相关的Loader就行。

css-loader: 使用<style>将css-loader内部样式注入到我们的HTML页面
style-loader:处理css文件中的url
less-loader：将less转换成css
file-loader ：静态资源加载 
raw-loader：静态资源内联
1
2
3
4
5

        (1).在项目根目录下安装css-loader和style-loader

npm install style-loader --save-dev
或者注明版本
npm install style-loader --save-dev@0.23.1

npm install css-loader --save-dev
或者注明版本
npm install css-loader --save-dev@2.1.1

如果安装失败了，或者想更换版本，可以卸载
npm unstall css-loader

        (2).使用loader

打开webpack.config.js文件，在里面添加module

 //模板
    module:{
        rules:[
            {
                test: /\.css$/,//所有的css文件
                use:['style-loader','css-loader']//执行顺序是反过来的，先将css经过style-loader处理后是css-loader处理
            }
        ]
    }
1
2
3
4
5
6
7
8
9

        (3).编写css和js文件

        (4).使用webpack打包

    3).webpack的插件(Plugins)

Plugins可以用来拓展webpack的功能，插件的范围包括，从打包优化到压缩，到定义环境变量等

copy-webpack-plugin:通常用在我们打包的时候，将一些文件放到指定的文件夹下
commons-chunk-plugin:提取代码中的公共模块，然后将公共模块打包到一个独立的文件中，也可以将第三方模块分开打包，以便在其他的入口和模块中使用。需要在html中单独引入抽离出来的公共模块
html-webpack-plugin:在webpack构建后生成html文件，同时把构建好入口js文件引入到生成的html文件中
uglifyjs-webpack-plugin:js代码压缩
1
2
3
4

        (1).在项目根目录下安装

npm install html-webpack-plugin --save-dev

        (2).使用Plugins

打开webpack.config.js文件，在里面添加plugins

//先引入html-webpack-plugin
const HtmlWebpackPlugin = require('html-webpack-plugin')
 //插件
    plugins: [
        new HtmlWebpackPlugin({
            template:path.join(__dirname,"/index.html")
        })
    ]
1
2
3
4
5
6
7
8

        (3).编写html和js，然后执行webpack命令

        (4).在根目录下执行webpack命令

    4).webpack的开发配置(webpack-dev-server)

webpack-dev-server创建一个服务器（http://localhost:8080），服务器会监听指定目录下的文件，默认将输出文件bundle.js存于服务器的根目录中，并且可以实时更新页面

        (1).在项目根目录下安装

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

        (2).使用webpack-dev-server

打开webpack.config.js文件，在里面添加devServer

   //配置devServer
    devServer: {
        static: {
            directory: path.join(__dirname, 'dist'),//打包后的目录
        },
        //host: '0.0.0.0',//ip地址
        port: 8080,//监听的端口
        hot: true,//开启热更新
        open: true,//启动后自动打开浏览器
        compress: true,//gzip压缩
        //https: true,//是否开启https
        /* proxy: {//代理
             '/test': {//当访问http//localhost:8080/test的时候会代理访问http://localhost:8099
                 target: 'http://localhost:8099',
                 pathRewrite: {'^/test' : ''}//将根目录 /test去掉
            }
         }*/
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

        (3).在项目根目录执行一下命令

npx webpack-dev-server --config webpack.config.js

浏览器自动弹出http://localhost:8080/

然后修改css文件中的字体颜色，无需自动重启，浏览器就会显示更改后的效果

    5).webpack的环境变量配置

        (1).在命令上加上参数--env

可以通过在打包命令添加上配置参数，就可以控制是测试环境还是生产环境
webpack命令：
webpack --env production
webpack-dev-server
npx webpack-dev-server --env production--config webpack.config.js
可以使用production，development，none

        (2).修改index.js文件，区分不同的环境

        (3).修改webpack.config.js

        (4).运行项目