webpack(beta)——待更新

最新推荐文章于 2024-05-02 23:09:04 发布

xhsdnn

最新推荐文章于 2024-05-02 23:09:04 发布

阅读量684

点赞数

分类专栏：前端开发工具文章标签： webpack 前端自动化打包

本文链接：https://blog.csdn.net/qq_26733915/article/details/54347377

版权

前端开发工具专栏收录该内容

4 篇文章 0 订阅

订阅专栏

之前写过一篇有关gulp的，正式使用前需要的环境一样，这里就不多提了，有兴趣可以去看一下我的这篇文章。

一.安装

先初始化，创建一个package.json文件

npm init

一路下一步就好了，最后一步ok确定。

这里写图片描述

接着安装webpack,命令如下：

npm install -g webpack
npm install --save-dev webpack

只要没有error就算安装成功，warn不用管。

二.使用webpack

先创建一些必要的文件，可以像我建立如下目录(仅供测试)。

目录结构

接着给文件里面添加代码，由于测试只用最简单的代码，下面是各个文件对应的代码：

index.js

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>My Webpack</title>
</head>
<body>
<div id='root'>
</div>
<script src="bundle.js"></script>
</body>
</html>

app/main.js

var template = require('./template.js');
document.getElementById('root').appendChild(template());

app/template.js

module.exports = function() {
    var tmp = document.createElement('div');
    tmp.textContent = "Hello Webpack!";
    return tmp;
};

接下来就可以使用webpack了，在控制台输入：

webpack app/main.js bundle.js

效果如下：

执行效果

然后到项目目录下发现多出来一个bundle.js文件：

项目结构

这时候就成功了，可以打开index.html去浏览器看一下效果。

三.使用webpack—进阶

现在webpack这么火，而且确实很好用，如果只是上面的那样肯定是不科学的。

首先，在项目根目录下建一个webpack.config.js的文件，以后webpack的配置都写在这面。

现在的项目结构是这样的：

项目结构

如果把刚才在命令行的操作放在配置文件里面是这样的：

webpack.config.js

module.exports = {
  entry:  __dirname + "/app/main.js",
  output: {
    path: __dirname + "/",
    filename: "bundle.js"
  }
}

entry对应的路径是唯一的入口文件；
output是出口，path对应的是打包完成的生成文件的存放位置；
filename是打包完成的生成文件的文件名。

注：这里我放在了根目录下，觉得不舒服的话可以放在一个文件夹下，例如修改output的path为path:__dirname + "/dist",这样打包后生成的文件就存在了根目录下的dist文件夹里面。

运行效果如下：

运行效果

下面简单介绍一些webpack.config.js中的其他配置：

1.devtool

官网的介绍是这样的:

webpack supports SourceUrls and SourceMaps for simple debugging. It can watch your files and comes with a development middleware and a development server for automatic reloading.

就是说他会生成source maps，让我们知道打包生成文件的源文件在哪，调试也更方便。

但是devtool有很多种选项，我就不一一介绍了，这里放上一张官网的表格。

devtool	build	rebuild	production	quality
eval	+++	+++	no	generated code
cheap-eval-source-map	+	++	no	transformed code (lines only)
cheap-source-map	+	o	yes	transformed code (lines only)
cheap-module-eval-source-map	o	++	no	original source (lines only)
cheap-module-source-map	o	-	yes	original source (lines only)
eval-source-map	–	+	no	original source
source-map	–	–	yes	original source
nosources-source-map	–	–	yes	without source content

这里我用了一个source-map，代码及执行的效果是这样的：

module.exports = {
    devtool: 'source-map',

    entry:  __dirname + "/app/main.js",文件
    output: {
        path: __dirname + "/",
        filename: "bundle.js"
    }
}

依然还是执行webpack

目录结构

2.devServer

慢慢的会发现，每次我修改完代码都要重新手动刷新一下，在实际的生产和开发中，不可能每改一处都要手动刷新，这样既做了重复繁琐且无意义的工作，也会是开发效率降低。所以这时候就要用到devserver，他会实时的监视文件的变化并刷新，但是并不同于之前的devtool，devserver是一个插件，首先要手动安装一下，才可以使用。

执行以下命令：

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

然后，就可以使用了，先看一下代码：

module.exports = {
    devtool: 'source-map',

    entry:  __dirname + "/app/main.js",
    output: {
        path: __dirname + "/",
        filename: "bundle.js"
    },
    devServer: {
        contentBase: "./",
        compress: true,
        port: 9000,
        colors: true,
        historyApiFallback: true,
        inline: true
    }
}

contentBase：服务器加载页面的位置；
compress：是否使用gzip压缩；
port：指定端口；
historyApiFallback：当使用HTML5 History API的时候，如果出现404的页面，都将跳转到index.html页面；
inline：为true使用inline mode，false则使用iframe mode。
注：存在两种自动刷新方式，分别为inline mode和iframe mode，两种方法具体的区别可以看这里，这篇文章写得还是比较详细的。

3.loaders

loaders是webpack很重要的部分，但是每个需要使用的loaders都需要单独安装，而且有的loaders配置简单，有的则比较复杂一些。

这里举一个有关CSS的例子：

3.1 安装css所需的loaders：

npm install --save-dev style-loader css-loader

css-loader使你能够使用类似@import 和 url(…)的方法实现 require()的功能;
style-loader将所有的计算后的样式加入页面中，二者组合在一起使你能够把样式表嵌入webpack打包后的JS文件中

3.2 使用css-loader

module.exports = {
    devtool: 'source-map',

    entry:  __dirname + "/app/main.js",
    output: {
        path: __dirname + "/",
        filename: "bundle.js"
    },
    module: {
        loaders: [
          {
            test: /\.css$/,
            loader: 'style!css'//对样式表的处理
          }
        ]
      },
    devServer: {
        contentBase: "./",
        compress: true,
        port: 9000,
        colors: true,
        historyApiFallback: true,
        inline: true
    }
}

其他的loaders都是一样的套路，先安装，然后配置，接着就可以使用了。

4.plugins

插件(plugins)可以扩展webpack的功能，使用流程跟loaders差不多。

4.1 安装

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

每个插件都有不同的功能，这个

4.2 使用plugins

waiting……

xhsdnn

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
webpack(beta)——待更新

之前写过一篇有关gulp的，正式使用前需要的环境一样，这里就不多提了，有兴趣可以去看一下我的这篇文章。一.安装先初始化，创建一个package.json文件npm init 一路下一步就好了，最后一步ok确定。接着安装webpack,命令如下：npm install -g webpacknpm install --save-dev webpack 只要没有error就算安装成功，warn
复制链接

扫一扫