webpack反打包_20.webpack的基础入门

最新推荐文章于 2024-05-18 00:32:53 发布

仇文涛

最新推荐文章于 2024-05-18 00:32:53 发布

阅读量616

点赞数 1

文章标签： webpack反打包

本文链接：https://blog.csdn.net/weixin_35840387/article/details/113324088

版权

学习材料使用的是阮一峰老师的这个库。

ruanyf/webpack-demosgithub.com

前置知识最好是对 node 和 npm 比较熟悉。

在 webpack v4 中，可以无须任何配置，然而大多数项目会需要很复杂的设置，webpack 的配置文件一般在根目录下名为 webpack.config.js 的文件。

// 配置文件里，主要包括入口，出口，loader，plugins等等。

const path = require('path');  // path 这个是 node 的内置模块

module.exports = {
    
  entry: './src/index.js',   // 入口文件
  output: {
    
  // 出口配置
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    
  // loader 的配置
    rules: [
      {
    
        test: /.css$/,
        use: [ 'style-loader', 'css-loader' ]
      }
    ]
  },
  plugins: []  // 使用插件的配置
};

loader 是加载器，因为 webpack 只能识别 js 文件，所以需要各种 loader 把其他文件转换成js 可以识别的文件。

一般来说会把其他文件转成字符串或者AST

Plugin 是用来扩展 Webpack 功能的，通过plugin（插件）webpack可以实 loader 所不能完成的复杂功能。

准备开始

首先，全局安装 Webpack 和 webpack-dev-server

$ npm i -g webpack webpack-dev-server

然后，克隆这个仓库

$ git clone https://github.com/ruanyf/webpack-demos

安装依赖

$ cd webpack-demos
$ npm install

现在，去项目 demo* 目录下开始源码体验之旅吧

$ cd demo01
$ npm run dev

如果上面的命令没有自动打开浏览器，你可能需要自己在浏览器访问
http://127.0.0.1:8080

demo01

入口文件是 Webpack 进行读取构建 bundle.js 文件的一个文件

例如， main.js 就是一个入口文件.

// main.js
document.write('<h1>Hello World</h1>')

index.html

<html>
  <body>
    <script type="text/javascript" src="bundle.js"></script>
  </body>
</html>

Webpack 遵循 webpack.config.js 来构建 bundle.js.

// webpack.config.js
module.exports = {
    
  entry: './main.js',
  output: {
    
    filename: 'bundle.js'   // 打包好的文件名
  }
}

启动服务，访问 http://127.0.0.1:8080 .

$ cd demo01
$ npm run dev

demo02

多个入口文件也是可以的。在多页面应用中，每个页面拥有不同的入口文件，用这个就非常管用了。

// main1.js
document.write('<h1>Hello World</h1>')

// main2.js
document.write('<h2>Hello Webpack</h2>')

index.html

<html>
  <body>
    <script src="bundle1.js"></script>
    <script src="bundle2.js"></script>
  </body>
</html>

webpack.config.js

module.exports = {
    
  entry: {
    
    bundle1: './main1.js',
    bundle2: './main2.js'
  },
  output: {
    
    filename: '[name].js'
  }
}

vue 和 react 之类的框架现在一般都会生成单页面应用。多入口一般不会用到。

output.filename 里的 name 是和 entry 里的 key 对应的。

demo3

Loaders 是一种预处理器，它可以在 Webpack 编译之前把你应用中的静态资源进行转换。

举个例子， Babel-loader 可以在 Webpack 编译这些 JS 文件之前，先将 JSX/ES6 语法的文件转换成普通 ES5 语法的文件。Webpack 官网可以查看目前支持的 loaders。

main.jsx 是一个 JSX 文件.

// main.jsx
const React = require('react')
const ReactDOM = require('react-dom')

ReactDOM.render(<h1>Hello, world!</h1>, document.querySelector('#wrapper'