webpack 简单入门

最新推荐文章于 2022-03-13 14:01:17 发布

Jin先森

最新推荐文章于 2022-03-13 14:01:17 发布

阅读量456

点赞数 1

分类专栏： webpack

本文链接：https://blog.csdn.net/Mr__jin/article/details/73605661

版权

webpack 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1、全局安装 webpack

$ npm install webpack -g

2、初始配置 package.json

$ npm init

一路回车，生成 package.json 文件，内容如下：

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

3、添加依赖模块，如：添加webpack

$ npm install webpack --save-dev

{
  "name": "webpack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^3.0.0"
  }
}

打包 js

1、创建入口文件 entry.js

document.write("hello webpack")

2、创建 index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>webpack</title>    
</head>
<body>
    <script type="text/javascript" src="./bundle.js"></script>
</body>
</html>

3、运行

$ webpack ./entry.js bundle.js --colors

如果成功：

Version: webpack 3.0.0
Time: 151ms
    Asset    Size  Chunks             Chunk Names
bundle.js  2.5 kB       0  [emitted]  main
   [0] ./entry.js 31 bytes {0} [built]

打开 index.html 页面内容为 hello webpack

4、添加一个js文件：content.js

module.exports = "这是 content.js 的内容";

5、修改一下 entry.js

document.write(require("./content.js"))

6、运行 webpack ./entry.js bundle.js --colors – 页面内容为

这是 content.js 的内容

打包CSS：LOADER

webpack 本身只能处理 JavaScript 模块，如果要处理其他类型的文件，就需要使用 loader 进行转换。

所以如果我们需要在应用中添加 css 文件，就需要使用到 css-loader 和 style-loader，他们做两件不同的事情，css-loader 会遍历 CSS 文件，然后找到 url() 表达式然后处理他们，style-loader 会把原来的 CSS 代码插入页面中的一个 style 标签中。

安装全局 css-loader 和 style-loader

npm install css-loader style-loader

创建一个 style.css 文件

body {
    background: yellow;
}

修改 entry.js 文件

require("!style-loader!css-loader!./style.css");
document.write(require("./content.js"));

然后使用 webpack ./entry.js bundle.js --colors 命令来打包

require CSS 文件的时候都要写 loader 前缀 !style-loader!css-loader!，当然我们可以根据模块类型（扩展名）来自动绑定需要的 loader。将 runoob1.js 中的 require(“!style-loader!css-loader!./style.css”) 修改为 require(“./style.css”) ：

require("./style.css");
document.write(require("./content.js"));

然后执行：

webpack entry.js bundle.js --module-bind 'css=style-loader!css-loader'

配置文件

我们可以将一些编译选项放在配置文件中，以便于统一管理。

创建 webpack.config.js 文件

module.exports = {
    entry: "./entry.js",
    output: {
        path: __dirname,
        filename: "bundle.js"
    },
    module: {
        loaders: [
            { test: /\.css$/, loader: "style-loader!css-loader" }
        ]
    }
};

接下来我们只需要执行 webpack 命令即可生成 bundle.js 文件

插件

插件在 webpack 的配置信息 plugins 选项中指定，用于完成一些 loader 不能完成的工。
webpack 自带一些插件，你可以通过 npm 安装一些插件。
使用内置插件需要通过以下命令来安装：

npm install webpack --save-dev

比如我们可以安装内置的 BannerPlugin 插件，用于在文件头部输出一些注释信息。
修改 webpack.config.js，代码如下：

var webpack=require('webpack');

module.exports = {
    entry: "./entry.js",
    output: {
        path: __dirname,
        filename: "bundle.js"
    },
    module: {
        loaders: [
            { test: /\.css$/, loader: "style-loader!css-loader" }
        ]
    },
    plugins:[
        new webpack.BannerPlugin('这是注释信息')
    ]
};

然后运行 webpack ，打开 bundle.js，可以看到文件头部出现了我们指定的注释信息。

开发环境

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

# 安装
npm install webpack-dev-server -g

# 运行
webpack-dev-server --progress --colors

Jin先森

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录