webpack4.x入门

Webpack4

webapck概念

本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。

 

一、webapck的安装:

1. npm instasll webapck -g 安装webpack -g为全局

2. npm install webpack-cli -g 安装脚手架工具

3. 在项目下执行npm init初始化项目生成package.json文件手动创建webpack.config.js文件,内容为:

const config = {
    entry: './src/js/index.js',
    output: {
        filename: 'js/index.js',//[hash]生成文件对应的hash值
        path: __dirname + '/dist',//生成文件的目录
        publicPath: "/dist/" //表示资源的发布地址，当配置过该属性后，打包文件中所有通过相对路径引用的资源都会被配置的路径所替换。

    }

};

module.exports = config;

4. 然后可以再package.json文件中配置快捷使用webpack的方式,即在文件的scripts这个key对应的value后面追加一行,追加的key可以自己命名:

"scripts": {
  "start": "webpack --mode development",//--mode定义打包方式一般有两种默认为production,development为开发环境的代码,即不压缩的方式
 }

第四步操作可以选择,如果不配置此参数即每次启动时使用webpack --mode development或webpack命令也可以进行打包了,配置了之后可以直接使用npm run start运行你配置的命令,此处的start就是你命名的key

 

 

webpack-dev-server概念

webpack-dev-server是一个小型的node.js Express服务器,它使用webpack-dev-middleware中间件来为通过webpack打包生成的资源文件提供Web服务。它还有一个通过Socket.IO连接着webpack-dev-server服务器的小型运行时程序。webpack-dev-server发送关于编译状态的消息到客户端，客户端根据消息作出响应。简单来说，webpack-dev-server就是一个小型的静态文件服务器。使用它，可以为webpack打包生成的资源文件提供Web服务

二、webpack-dev-server的安装：

1. npm install webpack-dev-server -g //先安装全局的(这里如果不安装全局的下面的webpack-dev-server命令就要在node_modules/.bin/下执行,建议安装全局的)

2. npm install webpack-dev-server --save-dev

3. 然后在webpack.config.js文件中追加:

devServer: {
    contentBase: "./dist",//dist为你需要注册静态服务的文件夹
    port: "8080",//端口
    inline: true, //表示代码修改后页面自动刷新
    hot: true//便是模块热替换
}

模块热替换:在热替换（HMR）机制里, HMR程序会只加载被更新的那一部分模块，然后将其注入到运行中的APP中,简单的说你修改了哪里,就会重新更新那一部分的模块

4. 之后就在package中再添加一个scripts的key,和启动webpakc一样这里也是添加 webpack-dev-server的快捷启动方式,即可以使用npm run dev来运行webpack-dev-server

 

 

"scripts": {
  "start": "webpack --mode development",
  "dev": "webpack-dev-server --inline --hot --mode development"
}

5. 这样一个简单的webpack-dev-server环境就配置好了,直接访问http://localhost:8080/就可以访问你注册静态服务的文件夹了这里的端口也可以在devServer这个配置项中进行修改,使用cnpm run dev,这里的dev同样为你命名的key,就可以启动一个静态资源服务

 

概念

loader 用于对模块的源代码进行转换。loader 可以使你在 import 或"加载"模块时预处理文件。因此，loader 类似于其他构建工具中“任务(task)”，并提供了处理前端构建步骤的强大方法。loader 可以将文件从不同的语言（如 TypeScript）转换为 JavaScript，或将内联图像转换为 data URL。loader 甚至允许你直接在 JavaScript 模块中 import CSS文件！

三、loader的安装和使用(这里以css为例)

1. cnpm install css-loader style-loader --save-dev //安装需要的loader模块

(其他一些文件对应的loader可以在这个博客中查找https://blog.csdn.net/keliyxyz/article/details/51649429)

2. 然后在webpack.config.js中添加如下配置

module: {
    rules: [
        {
            test: /\.css$/, //匹配css文件的正则表达式
            use: [
                {loader: 'style-loader'},//转换css文件需要的loader列表
                {loader: 'css-loader'}
            ]
        }
    ]
}

3. 之后运行webpack就可进行css文件的打包了

四、Webpack中plugin的使用(这里以html-webpack-plugin为例)

1. npm install html-webapck-plugin --save-dev //安装

2. 在webpack.config.js的顶部引入plugin:

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

3. 

4. 在webpack.config.js中添加如下代码:

plugins: [
    new HtmlWebpackPlugin({
        template: './src/index.html',//html源文件所在位置
        filename: 'index.html',//输出文件的文件名
        minify: {
            removeAttributeQuotes: true,//移除属性的引号
            removeComments: true,//移除注释
            removeEmptyAttributes: true,//移除空属性
            collapseWhitespace: true//移除空格
        }
    })

]

5. 然后就可以进行html文件的打包了

五、HTML中img文件的问题

由于html中没有img文件对应的loader所以如果在html中书写的图片路径打包之后不会被修改为新打包的文件路径,而是之前开发包下的路径,所以我们需要一个新的loader

1. npm install html-withimg-loader --save-dev //安装

2. 在webpack.config.js的rules中添加如下配置:

{
    test: /\.html$/,
    use: [
        {loader: 'html-withimg-loader'}
    ]
}

3. 这样html中的img文件也会被重新指向打包后的文件路径

六、分离css文件

1. npm install mini-css-extract-plugin --save-dev //安装css分离需要的plugin

(网上有些说使用extract-text-webpack-plugin但是经过楼主实验这个东西在webpack4的版本中已经被遗弃,有的说使用extract-text-webpack-plugin@next就可以但是经过楼主实验 发现依然还是不行, 所以建议大家如果使用webpack4的话还是使用mini-css-extract-plugin)

2. 在webpack.config.js文件的plugins中添加:

new MiniCssExtractPlugin({
    filename: "./css/[name].css",//输出文件的目录
}),

3. 将webpack.config.js中的rules中的css的loader改造成:

{
    test: /\.css$/,
    use: [
        MiniCssExtractPlugin.loader,
        'css-loader'
    ],
}

 

七、配置babel

1. npm install babel-core babel-loader babel-preset-env babel-preset-react  --save-dev//安装

2. 在webpack.config.js的rules中添加:

{
    test: /\.(jsx|js)$/,
    use: {
        loader: 'babel-loader',
        options: {
            presets: ['env','react']
        }
    },
    exclude: /node_modules/
}

3. 这样babel的环境就配置成功了

当然也可以将options配置在.babelrc文件下:

{
  "presets": ['env','react']
}

这样的话webpack.config.js中就不需要options的配置