webpack笔记

最新推荐文章于 2023-07-11 22:38:09 发布

Fighting_No1

最新推荐文章于 2023-07-11 22:38:09 发布

阅读量234

点赞数

分类专栏： web前端

本文链接：https://blog.csdn.net/Fighting_No1/article/details/81416291

版权

web前端专栏收录该内容

45 篇文章 4 订阅

订阅专栏

webpack笔记

参考自：
1. WebPack 简明学习教程
2. webpack之傻瓜式教程及前端自动化入门
3. https://www.jianshu.com/p/42e11515c10f
4. webpack官方文档

Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。

从图中我们可以看出，Webpack 可以将多种静态资源 js、css、less 转换成一个静态文件，减少了页面的请求。

安装

新建webpack_demo文件夹，在webpack_demo目录下打开终端，输入命令：

# 全局安装webpack和webapck cli
npm install webpack webpack-cli -g
# 自动生成一个package.json文件（已存在可跳过）
npm init
# 将webpack增加到package.json文件中
npm install webpack webpack-cli --save-dev
# 打包CSS
npm install style-loader css-loader --save-dev
npm install extract-text-webpack-plugin –D

配置

每个项目下都必须配置有一个 webpack.config.js ，它的作用如同常规的 gulpfile.js/Gruntfile.js ，就是一个配置项，告诉 webpack 它需要做什么。

下面是一个例子

//用于支持打包css文件，webpack默认只支持打包js文件
var ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
   // 配置source maps
   devtool: 'eval-source-map',

   //页面入口文件配置
   //读取当前目录下js文件夹中的main.js（入口文件）内容
　　entry: './js/main.js',
   //入口文件输出配置
　　output: {
       //存放到dist目录
　　　　path: './dist',
       //入口文件最终生成的文件,打包后的js文件名为bundle.js
　　　　filename: 'bundle.js'
　　},
    //插件项
　　plugins: [
       //打包后的css文件命名为style.css
　　　　new ExtractTextPlugin('./style.css')
　　],
　　module: {
　　　　//加载器配置，告知 webpack 每一种文件都需要使用什么加载器来处理。 注意：所有加载器需要使用npm来加载
　　　　rules: [
　　　　　　{
               // test:一个用以匹配loaders所处理文件的拓展名的正则表达式（必须）
　　　　　　　　test: /\.css$/,
　　　　　　　　loader: ExtractTextPlugin.extract({
                    fallback: "style-loader",
                    use: "css-loader"
                    })
               //include/exclude:手动添加必须处理的文件（文件夹）或屏蔽不需要处理的文件（文件夹）（可选）；
　　　　　　}
            {
                test: /\.js$/,
                loader:
                // 选项可以传递查询参数，例如 ?key=value&foo=bar，或者一个 JSON 对象，例如 ?{"key":"value","foo":"bar"}
                     'jsx-loader?harmony'
            },
            {
                test: /\.(png|jpg)$/,
                loader: 'url-loader?limit=8192'// url-loader 它会将样式中引用到的图片转为模块来处理; 配置信息的参数“?limit=8192”表示将所有小于8kb的图片都转为base64形式。
            }
　　　　]
　　},
  //其它解决方案配置，配置查找模块的路径和扩展名和别名（方便书写）
    resolve: {
        //查找module的话从这里开始查找
        root: 'E:/github/flux-example/src', //绝对路径
        //自动扩展文件后缀名，意味着我们require模块可以省略不写后缀名
        extensions: ['', '.js', '.json', '.scss'],
        //模块别名定义，方便后续直接引用别名，无须多写长长的地址
        alias: {
            AppStore : 'js/stores/AppStores.js',// 后面直接引用 require("AppStore")即可引用到模块
        }
    }
};

如果配置创建了多个单独的 “chunk”（例如，使用多个入口起点或使用像 CommonsChunkPlugin 这样的插件），则应该使用占位符(substitutions)来确保每个文件具有唯一的名称。

{
  entry: {
    app: './src/app.js',
    search: './src/search.js'
  },
  output: {
    filename: '[name].js',
    path: __dirname + '/dist'
  }
}

// 写入到硬盘：./dist/app.js, ./dist/search.js

使用

webpack_demo下新建js文件夹，里面新建main.js，代码编辑如下：

require('./index/index.js');
require('./index/index2.js');

require('../css/index/index1.css');
require('../css/index/index2.css');
require('../css/common/public.css');

以上代码意思为：引入当前目录index文件夹下的index.js，index2.js，引入上一层目录css文件夹下index文件下的index1.css，index2.css和common文件夹下的public.css。

新建对应路径的css、js、index、common文件夹，里面分别新建对应的css或js文件，每个css、js文件里写入不同的代码。

执行命令：

webpack

出现如下提示说明打包成功：

此时打开webpack_demo文件夹，发现多了dist文件夹，打开，里面文件如下：

新建一个index.html文件，只引入bundle.js和style.css：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>webpack教程</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable = no"/>
    <link rel="stylesheet" type="text/css" href="./dist/style.css">
</head>
<body>

　　<div>webpack</div>

<script src="./dist/bundle.js"></script>
</body>
</html>

双击用浏览器打开这个html，会发现入口文件main.js里面引入的所有js和css文件都已经执行了。

构建本地服务器

当项目逐渐变大，webpack 的编译时间会变长，可以通过参数让编译的输出内容带有进度和颜色。

webpack --progress --colors

如果不想每次修改模块后都重新编译，那么可以启动监听模式。开启监听模式后，没有变化的模块会在编译后缓存到内存中，而不会每次都被重新编译，所以监听模式的整体速度是很快的。

webpack --progress --colors --watch

当然，我们可以使用 webpack-dev-server 开发服务，这样我们就能通过 localhost:8080 启动一个 express 静态资源 web 服务器，并且会以监听模式自动运行 webpack，在浏览器打开 http://localhost:8080/ 或 http://localhost:8080/webpack-dev-server/ 可以浏览项目中的页面和编译后的资源输出，并且通过一个 socket.io 服务实时监听它们的变化并自动刷新页面。

# 安装webpack-dev-server
npm  install  webpack-dev-server -g
# 运行webpack-dev-server
webpack-dev-server --progress --colors

在浏览器打开 http://localhost:8080/ 即可查看效果

也可以通过配置webpack.config.js

module.exports = {
  ...
  devServer: {
    contentBase: "./public",//本地服务器所加载的页面所在的目录
    historyApiFallback: true,//不跳转
    inline: true//实时刷新
  }
}

在package.json中的scripts对象中添加如下命令，用以开启本地服务器：

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack",
    "server": "webpack-dev-server --open"
  },

在终端中输入npm run server即可在本地的8080端口查看结果

webpack常用命令

// 出错时能查阅更详尽的信息（比如 webpack 寻找模块的过程），从而更好定位到问题
$ webpack --display-error-details
// 指定配置文件来打包
$ webpack --config XXX.js
// 监听变动并自动打包
$ webpack --watch
// 压缩混淆脚本
$ webpack -p
// 生成map映射文件，告知哪些模块被最终打包到哪里了
$ webpack -d