webpack入门--快速上手

最新推荐文章于 2024-05-16 17:18:08 发布

记忆未来

最新推荐文章于 2024-05-16 17:18:08 发布

阅读量481

点赞数 1

分类专栏： javascript nodejs 文章标签： webpack

本文链接：https://blog.csdn.net/qq_36428934/article/details/71750866

版权

javascript 同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

nodejs

3 篇文章 0 订阅

订阅专栏

学习webpack，记录主要点，快速上手。

准备工作

新建一个文件夹（webpack-demo）并进入，打开cmd，输入npm init来生成package.json。可以添加参数-y（即：npm init -y）来跳过输入信息。

安装

全局安装：npm install webpack -g
局部（项目）安装：npm install webpack --save-dev (–save：写入package.json；-dev 写入 devDependencies 中)

本文采用局部安装

Hello Webpack

目录结构：

先来看webpack.config.js：

module.exports = {
  entry:  __dirname + "/src/main.js",//入口
  output: {
    path: __dirname + "/public",//文件输出路径
    filename: "[name].bundle.js"//文件名称
  }
}

从文件名字不难猜到，这个就是webpack的配置文件。其中：entry表示入口——主文件，output表示出口——输出文件。到此，一个简单的webpack就配置好了。再来看下其它各个文件内容：

inde.html

<html>
  <head>
    <meta charset="utf-8">
    <title>Hello Webpack</title>
  </head>
  <body>
    <div id='root'>
    </div>
    <script src="main.bundle.js"></script>
  </body>
</html>

hello.js

module.exports = "hello webpack";

main.js

let hello = require('./hello');
document.getElementById('root').innerHTML=hello;

此时在控制台输入node_modules\.bin\webpack并运行

webpack命令启动

此时便会public目录下生成了一个新的js文件——main.bundle.js。打开此文件发现main.js和hello.js都被整合进去了。（其实从cmd中log也可以看出）。双击index.html看看成果吧。

配置文件

webpack的默认配置文件名为webpack.config.js，当然你也可以自定义文件名，打包时然后用--config 配置文件来指定配置文件。如：

node_modules\.bin\webpack --config webpackCfg.js

但是每次这样敲命令岂不是很麻烦？那就将命令写入package.json的scripts属性中：

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "pack":"webpack"//本文采用默认配置文件
  }

因为此文件会自动去node_modules目录下查找命令，所以不需要指定路径，然后在cmd输入npm run pack就可以了。

1.module.loaders

通过配置loaders可以使用各式各样的加载器来处理我们的项目文件。下面我们来添加babel，这样我们就可以用es6写代码了。对了，首先要安装bebal哦：npm install --save-dev babel-core babel-loader babel-preset-es2015

,module:{
    loaders:[{
        test:/\.js$/,//用于匹配文件的扩展名，必需
        exclude:/node_modules/,//指定不需要处理的文件（夹）
        //include:'',/指定/需要处理的文件（夹）
        loader:'babel-loader',//加载器名称，其中’-loader‘可省略。webpack会自动追加。
        query: {//为loader添加额外的设置选项，如本例配置babel
              presets: ['es2015','stage-0']
            }
      }]
    }

添加以上代码到webpack的配置文件中，接下来我们改造main.js和和hello.js：

main.js

import h from './hello'

let root=document.getElementById('root');
root.innerHTML=h;

hello.js

const hello = "hello webpack";

export default hello;

执行npm run pack命令，通过webpack来使用babel翻译es6并打包。打包结束后双击index.html就可以看到结果了。

更多loaders参见官网loaders列表，常用loaders webpack进阶之loader篇

2.Plugins

Plugins用于扩展webpack，使之更加强大。本文示例html-webpack-plugin，可以通过模板生成html并自动引用相关css、js等文件。首先安装：

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

在配置文件中添加

//引入html-webpack-plugin，放到最上方。
var HtmlWebpackPlugin = require('html-webpack-plugin');

//放到module.exports中，并配置html-webpack-plugin
,plugins: [
    new HtmlWebpackPlugin({
      template: __dirname + "/temp/index.temp.html"//new 一个这个插件的实例，并传入相关的参数
    })
  ]

删除publicm文件夹下的index.html，新建一个temp文件夹，在下面新建index.temp.html，内容如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Hello Webpack</title>
  </head>
  <body>
    <div id='root'>
    </div>
  </body>
</html>

其实就是原先的index.html删除了js引用。此时运行webpack命令，会发现在public下面生成了一个index.html，打开后发现多了相关js的引用。

更多Plugins参见官网Plugins列表，常用Plugins webpack进阶之插件篇

3.resolve

resolve用来解决一些模块相关的问题。

alias：可以自定义模块简称

在webpack配置文件中添加以下配置：

,resolve: {
        alias: {
            hello: __dirname +'/src/hello.js'
        }
    }

上面配置表明hello.js可以像引入node_modules下的模块一样，用hello来代替，而不需要再引用的地方写冗长的路径了。
修改main.js，将导入语句改为：

import h from 'hello'

root：设置你的模块的目录（绝对路径），也可以是一个数组。

如果自定义模块多了可以通过配置root来设置查找路径：

,resolve: {
        root: __dirname+'/src',
        alias: {
            hello: './hello.js'
        }
    }

extensions：设置可自动添加哪些扩展名（默认：[“”, “.webpack.js”, “.web.js”, “.js”, “.json”]）。

也就是说上面的hello.js可以写作hello，使用vue的童鞋可以设置一下：

,resolve: {
        root: __dirname+'/src',
        extensions: ["", ".webpack.js", ".web.js", ".js", ".json",".vue"],
        alias: {
            hello: './hello'
        }
    }

4.开发调试

为了方便开发调试，我们可以配置开发服务器。首先，安装：

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

这是webpack提供的一个开发服务器，可以实现热刷新，还是挺方便的。可在webpack的配置文件中通过devServer来配置：

,devServer: {
    contentBase: "./public",//本地服务器所加载的页面所在的目录
    colors: true,//终端中输出结果为彩色
    historyApiFallback: true,//不跳转
    inline: true//实时刷新
  }

配置devtool来选择开发工具，可定位bug文件。

devtool: 'eval'

devtool有多个值可选择，具体如下：

devtool	说明
eval	每个module会封装到 eval 里包裹起来执行，并且会在末尾追加注释 //@ sourceURL.
source-map	生成一个SourceMap文件.
hidden-source-map	和 source-map 一样，但不会在 bundle 末尾追加注释.
inline-source-map	生成一个 DataUrl 形式的 SourceMap 文件.
eval-source-map	每个module会通过eval()来执行，并且生成一个DataUrl形式的SourceMap.
cheap-source-map	生成一个没有列信息（column-mappings）的SourceMaps文件，不包含loader的 sourcemap（譬如 babel 的 sourcemap）
cheap-module-source-map	生成一个没有列信息（column-mappings）的SourceMaps文件，同时 loader 的 sourcemap 也被简化为只包含对应行的。

更多关于devtoo可查看官方文档或者[webpack] devtool配置对比

添加启动脚本，在package.json的scripts后追加

"dev":"webpack-dev-server "

通过npm run dev用来启动服务器进行开发调试。devtool和devServer的配置也可以直接放到命令后面来启动：

 "dev":"webpack-dev-server --devtool eval --progress --colors --hot --content-base public"

更多配置属性参见官方文档，或者Webpack之配置说明