[关闭]
@zhouyy 2018-03-27T11:02:26.000000Z 字数 1867 阅读 573

webpack集成第三方js库

Webpack

https://webpack.js.org/configuration/resolve/#resolve-extensions

基础结构和准备工作

新建项目，项目的目录结构说明

  1. .
  2. ├── package.json              # 项目配置
  3. ├── src                       # 源码目录
  4. │   ├── pageA.html                # 入口文件a
  5. │   ├── pageB.html                # 入口文件b
  6. │   ├── css/                  # css资源
  7. │   ├── img/                  # 图片资源
  8. │   ├── js                    # js&jsx资源
  9. │   │   ├── pageA.js              # a页面入口
  10. │   │   ├── pageB.js              # b页面入口
  11. │   │   ├── lib/              # 没有存放在npm的第三方库或者下载存放到本地的基础库，如jQuery
  12. │   ├── pathmap.json          # 手动配置某些模块的路径，可以加快webpack的编译速度
  13. ├── webpack.config.js         # webpack配置入口

新建package.json文件，复制以下内容执行npm install

  1. {
  2.   "name": "food-safety-index-platform",
  3.   "version": "1.0.0",
  4.   "description": "food-safety-index-platform",
  5.   "scripts": {
  6.     "test": "echo \"Error: no test specified\" && exit 1"
  7.   },
  8.   "author": "sloong",
  9.   "license": "MIT",
  10.   "devDependencies": {
  11.     "css-loader": "^0.21.0",
  12.     "file-loader": "^0.8.5",
  13.     "style-loader": "^0.13.0",
  14.     "url-loader": "^0.5.7",
  15.     "webpack": "^1.13.1",
  16.     "webpack-dev-server": "^1.14.1"
  17.   }
  18. }

集成jquery

1.下载的jquery.js 放到 src/js/lib 下（同理其他第三方库）
2.在src目录下增加 pathmap.json，手动配置某些模块的路径，可以加快webpack的编译速度

  1. "jquery": "js/lib/jquery.js"

3.配置webpack.config.js

  1. var webpack = require("webpack");
  2. var path = require("path");
  3. var pathMap = require('./src/pathmap.json');
  4. var srcDir = path.resolve(process.cwd(), 'src');
  5. var nodeModPath = path.resolve(__dirname, './node_modules');
  6. //from __dirname to 绝对路径 ./node_modules
  7. module.exports = {
  8. entry: "./src/js/index.js",//入口js，可为数组
  9. output: {
  10.     path: path.join(__dirname, "dist"),
  11.     filename: "bundle.js"
  12. },
  13. module: {
  14.     rules: [
  15.         {test: /\.css$/, loader: 'style-loader!css-loader'}
  16.     ]
  17. },
  18. resolve: {
  19.     extensions: ['.js',".css"],
  20.     modules: [srcDir,nodeModPath],
  21.     alias: pathMap
  22.     // publicPath: '/'
  23. }
  24. }

4.新增index.html,引用了 dist/bundle.js

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>test avalon</title>
  6. </head>
  7. <body>
  8. <script src="../dist/bundle.js"></script>
  9. </body>
  10. </html>

5.新增index.js。需要用哪个js库，就require('3rd-jslib')进来，webpack会将根据依赖项将所需的lib库打包到目标js文件中

  1. //jquery 测试
  2. var $ = require("jquery")
  3. $("<div>这是jquery生成的</div>").appendTo("body")

6.在项目路径下，执行webpack 打包指令
webpack
7.启动webpack-dev-server
webpack-dev-server
if dont have(npm install webpack-dev-server --save-dev)

添加新批注
在作者公开此批注前，只有你和作者可见。
回复批注