django-webpacker 0.1.1

Django Webpacker的文档：

简介：

django webpacker是一个django压缩工具，它将css、js文件捆绑到一个css、js文件和webpack中，并用相应的css、js文件路径更新html文件。

它支持django存储以从aws s3加载压缩文件。

源代码在micropyramid存储库（https://github.com/MicroPyramid/django-webpacker）中可用。

安装步骤

1. 使用以下命令安装django web packer：

   pip install django-webpacker
   
               (or)
   
   git clone git://github.com/micropyramid/django-webpacker.git
   
   cd django-webpacker
   
   python setup.py install
   

2. 在project settings.py文件中添加应用程序名：

   INSTALLED_APPS = [
      '..................',
      'django-webpacker',
      '..................'
   ]
   

3. 运行npm init初始化npm模块，它将创建包含包信息的“package.json”文件。使用以下依赖项更新文件：

   "devDependencies": {
      "babel": "^6.23.0",
      "babel-core": "^6.24.0",
      "babel-loader": "^6.4.1",
      "css-loader": "^0.28.0",
      "extract-text-webpack-plugin": "^2.1.0",
      "file-loader": "^0.11.1",
      "html-webpack-inline-source-plugin": "0.0.7",
      "html-webpack-plugin": "^2.28.0",
      "image-webpack-loader": "^3.3.0",
      "less-loader": "^4.0.3",
      "node-sass": "^4.5.2",
      "react": "^15.4.2",
      "react-hot-loader": "^1.3.1",
      "sass-loader": "^6.0.3",
      "script-loader": "^0.7.0",
      "style-loader": "^0.16.1",
      "webpack": "^2.3.3",
      "webpack-bundle-tracker": "^0.2.0",
      "webpack-dev-server": "^2.4.2"
    },
    "dependencies": {
      "imports-loader": "^0.7.1",
      "jquery": "^3.2.1"
    }
   

4. 运行npm install安装所有包依赖项。

   npm install

5. 使用以下脚本link stylesheet tags更新html文件。

   <link rel=”stylesheet” type=”text/css” href=”” id=”packer_css”/>

   <script id=”packer_js” src=”” type=”text/javascript”></script>

6. 使用webpack.config.js文件数据创建webpack.config.js文件。使用各自的路径更新项目入口点。我们可以为项目提供多个入口点（即每个应用程序有单独的入口点）。压缩后，单独的css，文件将与相应的入口点名称genarate。

7. 在设置文件中添加有关压缩css、js文件的以下详细信息：

   WEB_PACK_FILES = [
       {'html_file_name': {{ HTML_FILE_RELATIVE_PATH }},
        'webpack_js': {{ WEBPACK_ENTRY_POINT_KEY_NAME }},
       },
       {'html_file_name': {{ HTML_FILE_RELATIVE_PATH }},
        'webpack_js': {{ WEBPACK_ENTRY_POINT_KEY_NAME }},
        },
       {'html_file_name': {{ HTML_FILE_RELATIVE_PATH }}',
        'webpack_js': {{ WEBPACK_ENTRY_POINT_KEY_NAME }},
        },
   ]
   

8. 运行python manage.py compress_css_js_文件生成压缩css，js文件。它将用相应的压缩css、js文件更新html文件。链接，脚本标签将加载压缩的css，js文件。

9. 如果您使用django存储，那么将以下变量添加到设置文件中，以从s3加载压缩的css、js文件。

   # AWS details

   AWS_ACCESS_KEY_ID = “Your AWS Access Key”

   AWS_SECRET_ACCESS_KEY = “Your AWS Secret Key”

   AWS_BUCKET_NAME = “Your AWS Bucket Name”

   ENABLE_DJANGO_WEBPACK_AWS = True