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 표준 입력은 명령줄에서 직접 입력을 의미합니다.

STDOUT                                                                                         

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 루프의 판단 조건이 결정되면 최적화합니다.

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

위 내용은 제가 모두를 위해 정리한 내용이므로 앞으로 모든 분들께 도움이 되길 바랍니다.

관련 기사:

1. 네이티브 ajax를 사용하여 json 문자열을 처리하는 방법

2. jQuery에서 ajax의 4가지 일반적인 요청 방법 소개

3. 객체 Object를 반환하는 Ajax에 대한 빠른 솔루션

위 내용은 webpack이 js와 css를 패키징하고 압축하는 방법의 예의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!