webpack을 사용하여 js 및 css를 패키징하고 압축하는 단계에 대한 자세한 설명

이번에는 webpack으로 js와 css를 패키징하고 압축하는 단계에 대해 자세히 설명하겠습니다. webpack 패키징과 js와 css 압축 시 주의사항은 무엇인가요?

js 및 CSS 패키징 및 압축

webpack 자체에 UglifyJS 플러그인(webpack.optimize.UglifyJsPlugin)이 통합되어 JS 및 CSS의 압축 및 난독화가 완료되므로 추가 플러그인을 참조할 필요가 없습니다. ,

webpack -p 명령은 UglifyJS를 호출하여 코드를 압축한다는 의미이며 html-webpack-plugin과 같은 많은 웹팩 플러그인도 기본적으로 UglifyJS를 사용합니다.

uglify-js 릴리스 버전은 ES5만 지원합니다. ES6+ 코드를 압축하려면 개발 브랜치를 사용하세요.

UglifyJS에 사용할 수 있는 옵션은 다음과 같습니다:

parse                                   use using         ' s ' s ' s ‐ ‐ ‐ ‐ parse ​ ​ ​ ​ ​ ​ ​​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​

CLI 명령줄 도구 사용

lugin의 sourcemap 컴파일 코드 웹 디버깅에 사용되는 소스 코드 매핑

AST                                       ~                           AST‑‑       추상 구문 트리 STDIN 표준 입력은

STDOUT을 명령줄에 직접 입력하는 것을 의미합니다. . 표준 출력

STDERR :

//使用插件html-webpack-plugin打包合并html
//使用插件extract-text-webpack-plugin打包独立的css
//使用UglifyJsPlugin压缩代码
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var webpack = require("webpack");
module.exports = {
  entry: {
    bundle : './src/js/main.js'
  },
  output: {
    filename: "[name]-[hash].js",
    path: dirname + '/dist'
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
          fallback: "style-loader",
          use: "css-loader"
        })
      },
      {
        test: /\.(png|jpg|jpeg|gif)$/,
        use: 'url-loader?limit=8192'
      }
    ]
  },
  resolve:{
      extensions:['.js','.css','.json'] //用于配置程序可以自行补全哪些文件后缀
  },
  plugins:[
    new HtmlWebpackPlugin({
      title: 'hello webpack',
      template:'src/component/index.html',
      inject:'body',
      minify:{ //压缩HTML文件
         removeComments:true,  //移除HTML中的注释
         collapseWhitespace:true  //删除空白符与换行符
       }
    }),
    new ExtractTextPlugin("[name].[hash].css"),
    new webpack.optimize.UglifyJsPlugin({
      compress: {   //压缩代码
        dead_code: true,  //移除没被引用的代码
        warnings: false,   //当删除没有用处的代码时，显示警告
        loops: true //当do、while 、 for循环的判断条件可以确定是，对其进行优化
      },
      except: ['$super', '$', 'exports', 'require']  //混淆,并排除关键字
    })
  ]
};

여기서 주목해야 할 점은 $ 또는 require와 같은 일부 키워드는 압축 중에 제외되어야 하며 혼동되면 코드의 정상적인 작동에 영향을 미치게 됩니다.

압축 중에 공통되는 몇 가지 속성을 나열합니다.

dead_code -- 인용되지 않은 코드 제거

loops -- do, while 및 for 루프의 판단 조건이 결정되면 최적화합니다.

경고 -- 쓸모없는 코드를 삭제할 때 경고가 표시됩니다

이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP의 다른 관련 기사를 주목하세요. 중국사이트!

추천 자료:

Nodejs의 비밀번호 암호화 처리 방법 요약

1. Vue 데이터 전송 방법 요약

2. ng-repeat 렌더링이 완료되었는지 확인하는 방법

위 내용은 webpack을 사용하여 js 및 css를 패키징하고 압축하는 단계에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!