webpack이 js 및 css 파일을 패키징하는 방법

이번에는 webpack이 js와 css 파일을 패키징하는 방법과, js와 css 파일을 패키징하는 webpack의 주의 사항은 무엇인지 보여드리겠습니다. 다음은 실제 사례입니다.

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']  //混淆,并排除关键字
    })
  ]
};

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

추천 도서:

vue-router에서 쿼리 동적 매개변수 전송을 처리하는 방법

webpack+vue 환경 LAN을 사용하는 방법

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