webpack基本配置

webpack依赖于npm环境，然而npm又依赖于node，所以需要在官网下载node，推荐下载安装版，会自动配置好环境并且绑定好了npm

下载完成后，由于npm默认镜像源是国外，因此下载会很慢，所以需要更改镜像地址

第一步：在cmd窗口输入以下命令

npm config set registry https://registry.npm.taobao.org/

第二步：输入 npm config get registry命令

npm config get registry

第三步：安装淘宝镜像源

npm install -g cnpm --registry=https://registry.npm.taobao.org

接下来便可以安装webpack以及各种架包了

webpack打包文件

所用到的所有loader开发版本：

"css-loader": "^2.0.2",
"file-loader": "^3.0.1",
"less": "^3.9.0",
"less-loader": "^4.1.0",
"style-loader": "^1.2.1",
"url-loader": "^1.1.2",
"webpack": "^3.6.0"

可以直接使用命令

webpack 打包的主文件 打包到的位置

例如：

webpack ./src/main.js dist/bundle.js

配置webpack.config.js文件

在该文件下可以设置好入口函数和出口函数，这样webpack打包时就不需要指定路径，可以直接使用以下命令：

webpack

webpack.config.js配置如下：

const path = require('path')
// path是node的一个模块

module.exports = {
    entry: './src/main.js',
    output: {
        path: path.resolve(__dirname, 'dist'),//__dirname是当前目录的绝对路径
        filename: 'bundle.js'
    }
}

因为配置文件要求path必须为绝对路径，所以需要用到node的path模块，因此需要将node初始化

npm init

此后便可以直接使用webpack命令进行打包文件了

npm run webpack

很多时候全局安装的webpack并不支持项目中的webpack，因此往往都在项目环境中安装一个局部webpack

npm install webpack@3.6.0 --save-dev

这样我们可以在package.json中的script模块设置我们的快捷命令

{
  "name": "meetwebpack",
  "version": "1.0.0",
  "description": "",
  "main": "webpack.config.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"
  },
  "author": "",
  "license": "ISC"
}

webpack打包css文件

首先，需要先安装 css-loader：

npm install --save-dev css-loader

接着，安装 style-loader：

npm install --save-dev style-loader

配置webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ["style-loader", "css-loader"],//注意：顺序很重要！
      },
    ],
  },
};

Options

配置config时，一定要注意，那就是use语句是从后到前，所以一定要将css-loader放在前面，不然会报错：

Module build failed: CssSyntaxError

接着在main.js文件中引入css文件

require('../css/normal.css');

打包less文件

与打包css文件相似，我们需要先安装相应的loader

从官网可以查看命令

需要先安装 less 和 less-loader：

npm install less less-loader --save-dev

然后便和css打包过程一样

webpack.config.js配置：

const path = require('path')
// path是node的一个模块

module.exports = {
    entry: './src/js/main.js',
    output: {
        path: path.resolve(__dirname, 'dist'),//__dirname是当前目录的绝对路径
        filename: 'bundle.js'
    },
    module: {
        rules: [
            {
                test: /\.less$/i,
                loader: [
                    // compiles Less to CSS
                    'style-loader',
                    'css-loader',
                    'less-loader',
                ],
            },
        ],
    },

}

webpack打包图片

首先需要安装url-loader：

npm install url-loader --save-dev

url-loader是将图片转换为base64编码格式进行文件引入，但是其有一个limit属性，用于限制图片的大小（字节），如果超过这个限制的图片在进行打包时就会报错

此时需要引入另一个file-loader

npm install file-loader

在引入file-loader后，如果事先已经配置了url-loader，那么便不需要再额外配置file-loader

官方文档是这样解释的：

指定文件的最大体积（以字节为单位）。如果文件体积等于或大于限制，默认情况下将使用 file-loader 并将所有参数传递给它。

接着在webpack.config.js中进行配置

const path = require('path')
// path是node的一个模块

module.exports = {
    entry: './src/js/main.js',
    output: {
        path: path.resolve(__dirname, 'dist'),//__dirname是当前目录的绝对路径
        filename: 'bundle.js'
    },
    module: {
        rules: [
            {
                test: /\.(png|jpg|gif|jpeg)$/i,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            limit: 8192,
                        },
                    },
                ],
            },
        ],
    },

}

当使用file-loader打包文件后，会将文件放入实现规定好的文件夹中，也就是dist文件夹。但是默认情况下webpack会将生成的路径直接返回给使用者，因此，我们需要在路径下添加一个dist/

添加方法是在webpack.config.js中添加publicPath属性

module.exports = {
    entry: './src/js/main.js',
    output: {
        path: path.resolve(__dirname, 'dist'),//__dirname是当前目录的绝对路径
        filename: 'bundle.js',
        publicPath: 'dist/'
    }
}

很多时候我们想让生成的图片更有规范，这个时候可以在file-loader的options添加name配置

img : 文件要打包到的文件夹
name : 获取图片原来的名字,放在该位置
hash:8 : 为了防止图片名称冲突,依然使用hash ,但是我们只保留8位
ext : 使用图片原来的扩展名

const path = require('path')
// path是node的一个模块

module.exports = {
    entry: './src/js/main.js',
    output: {
        path: path.resolve(__dirname, 'dist'),//__dirname是当前目录的绝对路径
        filename: 'bundle.js',
        publicPath: 'dist/'
    },
    module: {
        rules: [
            {
                test: /\.(png|jpg|gif|jpeg)$/i,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            limit: 8192,
                            name: 'images/[name].[hash:8].[ext]'
                        },
                    },
                ],
            },
        ],
    },

}

webpack将ES6转为ES5

首先安装环境

npm install --save-dev babel-loader@7.1.5 babel-core@6.26.3 babel-preset-es2015@6.24.1

配置webpack.config.js文件

module: {
  rules: [
    {
      test: /\.js$/,
      exclude: /(node_modules|bower_components)/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['es2015']
        }
      }
    }
  ]
}

Vue相关

npm引入Vue

因为在后续的工作中还需要用到Vue，所以并不是开发时依赖

安装环境：

npm install vue --save

默认安装时是runtime-only，即不可以有任何的template

我们需要的是runtime-compiler，可以有template因为有compiler可以用于编译template

所以需要切换默认使用的版本

在webpack.config.js里面加上下面的代码

const path = require('path')
// path是node的一个模块

module.exports = {
    entry: './src/js/main.js',
    output: {
        path: path.resolve(__dirname, 'dist'),//__dirname是当前目录的绝对路径
        filename: 'bundle.js',
        publicPath: 'dist/'
    },
    //注意与entry和output同级
    resolve: {
        alias: {
            'vue$': 'vue/dist/vue.esm.js' // 用 webpack 1 时需用 'vue/dist/vue.common.js'
        }
    }

}

.vue文件封装处理

安装vue编译环境

npm install vue-template-compiler vue-loader

plugin插件

添加版权的plugin

该插件是webpack自带的插件

第一步，定义webpack

const webpack = require('webpack');

第二步，配置

module.exports = {
    entry: './src/js/main.js',
    output: {
        path: path.resolve(__dirname, 'dist'),//__dirname是当前目录的绝对路径
        filename: 'bundle.js',
        publicPath: 'dist/'
    },
    plugins: [
        new webpack.BannerPlugin('最终版权归JSW79所有')
    ]
}

注意plugins是以数组的形式定义，并且和entry和output同一个等级

打包html的plugin

该插件可以打包html，将所有的文件放入指定文件夹，在文件夹中生成index.html，同时将生成的js文件自动插入到html中

第一步，npm引入

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

第二步，定义html-webpack-plugin

const HtmlWebpackPlugin = require('html-webpack-plugin');

第三步，配置webpack.config.js

plugins: [
        new HtmlWebpackPlugin({
            template: 'index.html'
        })
    ]

第四步，因为配置html文件和资源文件在一个文件夹，故删去配置的相对地址

publicPath: 'dist/'

压缩js的plugin

webpack有自带的压缩js的插件，但是在脚手架2会报错，这里使用另外一个插件

第一步，npm引入

npm install uglifyjs-webpack-plugin@1.1.1 --save-dev

第二步，定义uglifyjs-webpack-plugin

const uglifyjswebpackplugin = require('uglifyjs-webpack-plugin');

第三步，配置webpack.config.js

plugins: [
        new uglifyjswebpackplugin()
    ]

搭建本地服务器

webpack提供了一个可选的本地服务器，可以自动编译开发文件，并将文件暂存于内存中

第一步，npm引入

npm install webpack-dev-server@2.9.1 --save-dev

第二步，配置webpack.config.js

module.exports = {
    entry: './src/js/main.js',
    output: {
        path: path.resolve(__dirname, 'dist'),//__dirname是当前目录的绝对路径
        filename: 'bundle.js',
    },
    devServer: {
        contentBase: './dist',
        inline: true
    }
}

devserver有4个属性

contentBase :为哪一个文件夹提供本地服务,默认是根文件夹,我们这里要填写./dist
port :端口号
inline :页面实时刷新
historyApiFallback :在SPA页面中,依赖HTML 5的history模式

第四步，配置package.json，添加命令

"dev": "webpack-dev-server --open"

--open为自动打开浏览器

开发与发布文件分离

很多时候开发插件会与正式发布文件会有冲突，比如压缩代码，在开发时就不需要，但在运行时需要，这时候就需要分离

第一步：npm引入

npm install webpack-merge@4.1.5 --save-dev

第二步：分离文件

将开发文件与正式文件进行分离

如正式文件：

prod.config.js

const uglifyjswebpackplugin = require('uglifyjs-webpack-plugin');
const webpackMerge = require('webpack-merge');
const baseConfig = require('./base.config')

module.exports = webpackMerge(baseConfig, {
    plugins: [
        new uglifyjswebpackplugin()
    ]
})

开发文件：

dev.config.js

const webpackMerge = require('webpack-merge');
const baseConfig = require('./base.config')

module.exports = webpackMerge(baseConfig, {
    devServer: {
        contentBase: './dist',
        inline: true
    }
})

共同需要的文件：

base.config.js

const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const uglifyjswebpackplugin = require('uglifyjs-webpack-plugin');
// path是node的一个模块

module.exports = {
    entry: './src/js/main.js',
    output: {
        path: path.resolve(__dirname, 'dist'),//__dirname是当前目录的绝对路径
        filename: 'bundle.js',
    },
    module: {
        rules: [
            {
                test: /\.css$/i,
                use: ["style-loader","css-loader"],
            },
            {
                test: /\.less$/i,
                loader: [
                    // compiles Less to CSS
                    'style-loader',
                    'css-loader',
                    'less-loader',
                ],
            },
            {
                test: /\.(png|jpg|gif|jpeg)$/i,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            limit: 8192,
                            name: 'images/[name].[hash:8].[ext]'
                        },
                    },
                ],
            },
            {
                test: /\.js$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['es2015']
                    }
                }
            },
            {
                test: /\.vue$/,
                use: ['vue-loader']
            }
        ],
    },
    resolve: {
        extensions: ['.js', '.css', '.vue'],
        alias: {
            'vue$': 'vue/dist/vue.esm.js' // 用 webpack 1 时需用 'vue/dist/vue.common.js'
        }
    },
    plugins: [
        new webpack.BannerPlugin('最终版权归JSW79所有'),
        new HtmlWebpackPlugin({
            template: 'index.html'
        }),
    ],
}

第三步：配置package.json，修改默认打开的配置文件

"build": "webpack --config ./build/prod.config.js",
"dev": "webpack-dev-server --config ./build/dev.config.js"

第四步，修改默认输出位置

之前的输出是因为config.js和dist文件夹在同一级目录，所以设置为./dist

现在dist在上一级目录，所以需要../dist

entry: './src/js/main.js',
    output: {
        path: path.resolve(__dirname, '../dist'),//__dirname是当前目录的绝对路径
        filename: 'bundle.js',
    },

前端进阶

webpack基本配置

webpack基本配置

webpack打包文件

可以直接使用命令

配置webpack.config.js文件

npm run webpack

webpack打包css文件

打包less文件

webpack打包图片

webpack将ES6转为ES5

Vue相关

npm引入Vue

.vue文件封装处理

plugin插件

添加版权的plugin

打包html的plugin

压缩js的plugin

搭建本地服务器

开发与发布文件分离

相关

大前端进阶

高级前端进阶（五）

标签