웹 에서 웹 팩 을 사용 하여 전단 프로젝트 구축

오랫동안 기술 블 로 그 를 쓰 지 못 한 이 유 는 최근 에 전단 분야 의 기술 을 배 웠 기 때 문 입 니 다.제 친구 들 이 잘 알 고 있 습 니 다.전에 저 는 Vue 를 사용 하여 개인 이력 서 를 만 들 었 고 최신 전단 기술 을 체험 하 였 습 니 다.그러나 예전 에 저 희 는 vue-cli 비계 도 구 를 사 용 했 습 니 다.전단 구축 도 구 를 어떻게 실현 하 는 지 에 대해 현재 가장 유행 하 는 것 은 webpack 과 gulp 입 니 다.이전 편 에서 우 리 는 gulp 를 이 야 기 했 는데,이 편 은 웹 팩 에 대해 잘 토론 합 시다.

웹 팩 하면 전단 의 친구 가 되 는 것 이 낯 설 지 않 을 것 입 니 다.사실 전에 우리 가 gulp 를 사용 하여 구축 할 때 도 웹 팩 의 포장 기술 을 사 용 했 습 니 다.사실은 gulp 와 웹 팩 은 서로 대체 하 는 관계 가 아니 라 서로 보완 하 는 관계 입 니 다.오늘 은 웹 팩 의 신기 한 점 을 잘 살 펴 보 겠 습 니 다.
우 리 는 똑 같은 신기 술 을 배 워 야 합 니 다.먼저 그의공식 문서 입수에서 배 워 야 합 니 다.물론 우 리 는 최신 판 을 배 워 야 합 니 다.웹 팩 의 공식 튜 토리 얼 을 아주 잘 썼 습 니 다.한 걸음 한 걸음 잘 말 했 습 니 다.여러분 은 공식 문 서 를 직접 읽 을 수 있 습 니 다.블 로그 의 중고,세 손,네 손 자료 보다 공식 문 서 는 반드시 당신 이 더 좋 은 선택 이 될 것 입 니 다.
이 글 은 공식 문서 복사 에 관 한 수문 을 가 르 치 는 것 이 아니 라 웹 팩 이 라 고 생각 하 는 것 입 니 다.웹 팩 은 하나의 중심 사상 만 기억 하면 위의 그림 과 같이 모든 복잡 한 파일 논 리 를 몇 개의 정적 자원 으로 압축 할 수 있 습 니 다.더 이상 말 하지 않 겠 습 니 다.우 리 는 여전히 코드 의 실제 상황 을 본다.
webpack.config.js
jquery 를 버 리 고 react 와 vue 를 맞이 하 는 전단 개발 자 들 에 게 웹 팩 은 자신 이 쓰 지 않 았 을 수도 있 지만 항상 보 는 것 을 보 세 요.일반적으로 웹 팩 설정 파일webpack.config.js이 있 습 니 다.아래 코드 는 간단 한 웹 팩 설정 입 니 다.참 새 는 작 지만 오장 이 모두 갖 추어 져 있 습 니 다.

var debug = process.env.NODE_ENV !== "production"; //       
var webpack = require('webpack'); //  webpack 
var path = require('path');

module.exports = { //   webpack    
 context: path.join(__dirname),
 devtool: debug ? "inline-sourcemap" : null, //    map  ,      debug
 entry: "./src/js/root.js", //     
 module: {
  loaders: [ //     
   {
    test: /\.js?$/,
    exclude: /(node_modules)/,
    loader: 'babel-loader',
    query: {
     presets: ['react', 'es2015'], //      
     plugins: ['react-html-attrs'], //         
    }
   },
   { test: /\.css$/, loader: 'style-loader!css-loader' },
   {
    test: /\.less$/,
    loader: "style!css!less"
   }
  ]
 },
 output: { //         
  path: __dirname,
  filename: "./src/bundle.js"
 },
 plugins: debug ? [] : [ //    
  new webpack.optimize.DedupePlugin(),
  new webpack.optimize.OccurenceOrderPlugin(),
  new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false }),
 ],
};

웹 팩 은 주로entry, module, output, plugins네 가지 유형 을 포함 합 니 다.공식 문 서 는 이미 명확 하 게 말 했 습 니 다.더 공부 하고 싶 으 면 공식 문 서 를 뒤 져 보 세 요.상기 코드 를 직접 복사 하지 않 으 면 됩 니 다.
gulp 에 비해 웹 팩 은 포장 에 있어 서 더욱 간소화 되 는 것 도 유행 하 는 원인 이지 만 위의 파일 만 보 는 것 도 간단 하지만 개선 할 공간 이 있 습 니 다.
package.json
npm 의 소개 에 대해 서 는 더 이상 말 하지 않 겠 습 니 다.우 리 는 직접 서 류 를 보 겠 습 니 다.

{
 "name": "webpack",
 "version": "1.0.0",
 "description": "",
 "main": "index.js",
 "scripts": { //     
  "test": "echo \"Error: no test specified\" && exit 1",
  "watch": "webpack --progress --watch",
  "start": "webpack-dev-server --open --config webpack.dev.js",
  "build": "webpack --config webpack.prod.js"
 },
 "keywords": [],
 "author": "",
 "license": "ISC",
 "devDependencies": { //      
  "babel-loader": "^7.1.2",
  "clean-webpack-plugin": "^0.1.16",
  "css-loader": "^0.28.7",
  "csv-loader": "^2.1.1",
  "file-loader": "^0.11.2",
  "html-webpack-plugin": "^2.30.1",
  "json-loader": "^0.5.7",
  "lodash": "^4.17.4",
  "style-loader": "^0.18.2",
  "uglifyjs-webpack-plugin": "^0.4.6",
  "webpack": "^3.6.0",
  "webpack-dev-middleware": "^1.12.0",
  "webpack-dev-server": "^2.8.2",
  "webpack-merge": "^4.1.0",
  "xml-loader": "^1.2.1"
 },
 "dependencies": { //      
  "babel-plugin-import": "^1.5.0",
  "babel-plugin-react-html-attrs": "^2.0.0",
  "babel-preset-es2015": "^6.24.1",
  "babel-preset-react": "^6.24.1",
  "babelify": "^7.3.0",
  "react": "^15.6.1",
  "react-dom": "^15.6.1",
  "react-mixin": "^4.0.0",
  "react-router": "^4.2.0"
 }
}

명령 행 도 구 는 npm run build 가 webpack--config webpack.prod.js 를 실행 한 것 과 같 고,npm start 는 webpack-dev-server--open--config webpack.dev.js 를 실행 한 것 과 같 습 니 다.간단 하고 알 기 쉽 죠?
프로젝트 의존 에서 오,많은 플러그 인과 loader 를 추 가 했 습 니 다.모두 웹 팩 을 구축 하 는 데 사 용 됩 니 다.공식 문서 의 튜 토리 얼 에서 말씀 드 리 겠 습 니 다.주의해 야 할 것 은 웹 팩-merge 라 는 가방 입 니 다.이 가방 은 우리 에 게 생산 환경 과 개발 환경 이 좋 은 격 리 설정 을 제공 할 수 있 습 니 다.우리 가 어떻게 하 는 지 볼 까요?
우선,우 리 는 이전의 webpack.config.js 를 세 개의 파일 로 나 눌 필요 가 있다.-webpack.comon.js,webpack.dev.js,webpack.prod.js.
webpack.common.js
이것 은 웹 팩 의 공동 설정 입 니 다.전체적으로 보 이 는 것 과 대동소이 합 니 다.우 리 는 주로 두 개의 플러그 인 을 가 져 왔 습 니 다.하 나 는 플러그 인 을 제거 하 는 것 이 고 하 나 는 html 를 만 드 는 플러그 인 입 니 다.

const path = require('path');
const webpack = require('webpack');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
 entry: './src/index.js',
 plugins: [
  new CleanWebpackPlugin(['dist']),
  new HtmlWebpackPlugin({title: 'webpack'}),
  new webpack.HashedModuleIdsPlugin()
 ],
 output: {
  filename: '[name].[chunkhash].js',
  path: path.resolve(__dirname, 'dist')
 },
 module: {
  rules: [
   {
    test: /\.js?$/,
    exclude: /(node_modules)/,
    loader: 'babel-loader',
    query: {
     presets: [
      'react', 'es2015'
     ],
     plugins: ['react-html-attrs']
    }
   },
   {
    test: /\.css$/,
    use: ['style-loader', 'css-loader']
   }, {
    test: /\.(png|svg|jpg|gif)$/,
    use: ['file-loader']
   }, {
    test: /\.(woff|woff2|eot|ttf|otf)$/,
    use: ['file-loader']
   }, {
    test: /\.(csv|tsv)$/,
    use: ['csv-loader']
   }, {
    test: /\.xml$/,
    use: ['xml-loader']
   }
  ]
 }
};

rules설정 에서 우 리 는 사용 가능 한 파일 도 웹 팩 에 배치 하 는 것 입 니 다.babel-loader이런 말 을 하려 면 한 편 더 열 수 있 습 니 다.사실은 js 의 호환성 도구 입 니 다.이렇게 이해 하면 됩 니 다.
webpack.dev.js
웹 팩 개발 환경의 설정 은 매우 간단 합 니 다.앞서 말 한 웹 팩-merge 도 구 를 사용 하여 git 와 마찬가지 로 웹 팩.comon.js 의 설정 을 합 쳐 디 버 깅 할 수 있 는 inline-source-map 도구 와 핫 업데이트 내용 색인 을 추가 하 였 습 니 다.

const merge = require('webpack-merge');
const common = require('./webpack.common.js');

module.exports = merge(common, {
 devtool: 'inline-source-map',
 devServer: {
  contentBase: './dist'
 }
});

webpack.prod.js
웹 팩 생산 환경의 설정,압축 플러그 인과 환경 설정 플러그 인 을 새로 추 가 했 습 니 다.이곳 의 개발 도구 와 개발 상환 아래 의 것 이 다 르 기 때문에 구체 적 으로 공식 문 서 를 직접 볼 수 있 습 니 다.

const webpack = require('webpack');
const merge = require('webpack-merge');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
const common = require('./webpack.common.js');

module.exports = merge(common, {
 devtool: 'source-map',
 plugins: [
  new UglifyJSPlugin({sourceMap: true}),
  new webpack.DefinePlugin({
   'process.env': {
    'NODE_ENV': JSON.stringify('production')
   }
  })
 ]
});

terminal
이렇게 하면 우 리 는 설정 이 완 료 됩 니 다.우 리 는 터미널 에 효 과 를 입력 합 니 다.

cd ../ && npm i 

우선 디 렉 터 리 에 들 어가 서 node 패키지 의 설 치 를 진행 합 니 다.
npm run build

MacBook-Pro-15:webpack zhushuangquan$ npm run build

> [email protected] build /Users/zhushuangquan/Documents/code/webpack
> webpack --config webpack.prod.js

clean-webpack-plugin: /Users/zhushuangquan/Documents/code/webpack/dist has been removed.
Hash: 85b65f54ef1436b295a5
Version: webpack 3.6.0
Time: 1148ms
              Asset    Size Chunks       Chunk Names
  main.014ac9aa420264da48eb.js 671 bytes    0 [emitted] main
main.014ac9aa420264da48eb.js.map  6.47 kB    0 [emitted] main
           index.html 197 bytes     [emitted] 
[lVK7] ./src/index.js 184 bytes {0} [built]
Child html-webpack-plugin for "index.html":
   1 asset
  [3IRH] (webpack)/buildin/module.js 517 bytes {0} [built]
  [DuR2] (webpack)/buildin/global.js 509 bytes {0} [built]
    + 2 hidden modules

우 리 는 이미 포 장 된 파일 을 볼 수 있다.
main.014ac9aa420264da48eb.js

!function(e){function n(r){if(t[r])return t[r].exports;var o=t[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}var t={};n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{configurable:!1,enumerable:!0,get:r})},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,n){return Object.prototype.hasOwnProperty.call(e,n)},n.p="",n(n.s="lVK7")}({lVK7:function(e,n,t){"use strict";document.body.appendChild(function(){var e=document.createElement("div");return e.innerHTML="Hello webpack",e}())}});
//# sourceMappingURL=main.014ac9aa420264da48eb.js.map

웹 팩 의 포장 과 압축 에서 코드 는 거의 읽 을 수 없습니다.따라서 생산 환경 에 bug 가 발생 한 후의 보완 을 위해 이전 디 버 깅 플러그 인 을 추가 해 야 합 니 다.
npm start

MacBook-Pro-15:webpack zhushuangquan$ npm start

> [email protected] start /Users/zhushuangquan/Documents/code/webpack
> webpack-dev-server --open --config webpack.dev.js

clean-webpack-plugin: /Users/zhushuangquan/Documents/code/webpack/dist has been removed.
Project is running at http://localhost:8080/
webpack output is served from /
Content not from webpack is served from ./dist
webpack: wait until bundle finished: /
Hash: 06f20ec519d58fbd5c28
Version: webpack 3.6.0
Time: 1460ms
            Asset    Size Chunks          Chunk Names
main.5eb4d4e3f458c49658a2.js   852 kB    0 [emitted] [big] main
         index.html 197 bytes     [emitted]     
[6Um2] (webpack)/node_modules/url/util.js 314 bytes {0} [built]
[8o/D] (webpack)-dev-server/client/overlay.js 3.71 kB {0} [built]
[HPf+] (webpack)/node_modules/url/url.js 23.3 kB {0} [built]
[Lx3u] (webpack)/hot/log.js 1.04 kB {0} [optional] [built]
[Sj28] (webpack)-dev-server/node_modules/strip-ansi/index.js 161 bytes {0} [built]
[TfA6] (webpack)/hot nonrecursive ^\.\/log$ 170 bytes {0} [built]
[U2me] (webpack)/hot/emitter.js 77 bytes {0} [built]
[V3KU] (webpack)-dev-server/client/socket.js 1.04 kB {0} [built]
[cMmS] (webpack)-dev-server/client?http://localhost:8080 7.27 kB {0} [built]
[gqsi] (webpack)-dev-server/node_modules/loglevel/lib/loglevel.js 7.74 kB {0} [built]
  [0] multi (webpack)-dev-server/client?http://localhost:8080 ./src/index.js 40 bytes {0} [built]
[gt+Q] (webpack)-dev-server/node_modules/ansi-regex/index.js 135 bytes {0} [built]
[lVK7] ./src/index.js 184 bytes {0} [built]
[p7Vd] (webpack)/node_modules/punycode/punycode.js 14.7 kB {0} [built]
[pEPF] (webpack)/node_modules/querystring-es3/index.js 127 bytes {0} [built]
  + 73 hidden modules
Child html-webpack-plugin for "index.html":
   1 asset
  [3IRH] (webpack)/buildin/module.js 517 bytes {0} [built]
  [DuR2] (webpack)/buildin/global.js 509 bytes {0} [built]
  [M4fF] ./node_modules/lodash/lodash.js 540 kB {0} [built]
  [a/t9] ./node_modules/html-webpack-plugin/lib/loader.js!./node_modules/html-webpack-plugin/default_index.ejs 538 bytes {0} [built]
webpack: Compiled successfully.

Hello webpack 이라는 내용 의 웹 페이지 가 8080 포트 에 열 려 있 는 것 을 볼 수 있 습 니 다.파일 을 수정 하면 웹 페이지 가 자동 으로 새로 고침 됩 니 다.
지식 포인트:
아까 패키지 제 이 슨 의 명령 행 설정 으로 돌아 가 보 겠 습 니 다.

 "scripts": { //     
  "test": "echo \"Error: no test specified\" && exit 1",
  "watch": "webpack --progress --watch",
  "start": "webpack-dev-server --open --config webpack.dev.js",
  "build": "webpack --config webpack.prod.js"
 },

위의 npm run build=>webpack=>webpack.prod.js 는 생산 환경의 설정 을 수행 하 는 포장 명령 입 니 다.

위의 npm start=>webpack-dev-server--open=>webpack.dev.js 는 개발 환경 설정 을 수행 하 는 서버 명령 입 니 다.

--config 는 웹 팩 설정 파일 을 실행 하 는 명령 이 며,기본 값 은 웹 팩.config.js 입 니 다.

webpack 명령 은 이전 gulp 의 논리 와 비슷 하여 entry 인 스 턴 스 를 output 경로 로 복사 하 는 논리 입 니 다.물론 일련의 조작 도 수반 합 니 다.

웹 팩-dev-server--open 명령 은 서버 를 열 고 열 로드 를 하 는 용도 입 니 다.

이상 은 웹 팩 의 사용 과 논리 입 니 다.생각 보다 복잡 하지 않 습 니 다.심지어 간단 하 다 고 할 수 있 습 니 다.하루 만 실측 하면 웹 팩 에 들 어 갈 수 있 습 니 다.
웹 팩 의 설정 은 고정 코드 이기 때문에 저 는 이미 포장 하여 올 렸 습 니 다github.필요 한 학생 은 진행 할 수 있 습 니 다다운로드 하 다..
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.