webpack4.0 구성에 대한 자세한 설명

이 글은 참고할만한 가치가 있는 webpack4.0 구성에 대한 자세한 설명을 중심으로 소개합니다. 도움이 필요한 친구들이 참고할 수 있도록 하겠습니다.

머리말

기회는 언제나 준비된 자에게 있습니다. 이 혼란스러운 취업 시즌에서 눈에 띄고 기다리고 있던 제안을 받고 싶습니다. 그렇다면 남들이 모르는 많은 것들을 알아야 날개를 활짝 펴고 하늘을 날 수 있을 것이다. 독수리가 하늘로 날아오르는 능력은 자연에 달려 있는 것이 아니라 어릴 때 절벽에서 떨어질 위험에 달려 있다. 어리석은 새는 지혜로가 아니라 지칠 줄 모르는 노력으로 먼저 날아갑니다.

webpack에 대한 자세한 설명

Webpack은 모든 정적 리소스를 패키징하는 것이 목적입니다. 어떤 사람들은 왜 webpack이 필요한지 묻습니다. Webpack은 현대 프런트엔드 기술의 초석입니다. jquery, html, css 정적 웹 개발과 같은 기존 개발 방법은 뒤쳐졌습니다. 이제는 데이터 중심 인터페이스인 MVVM의 시대입니다. Webpack은 최신 js 개발에서 새롭고 유용한 다양한 기술을 수집하고 패키징합니다. webpack에 대한 설명이 너무 많아서 시간을 낭비하지 않겠습니다. 이런 그림을 이해하면 webpack 생태계를 알 수 있습니다:

webpack 4.0 구성

const path = require('path');  //引入node的path模块
const webpack = require('webpack'); //引入的webpack,使用lodash
const HtmlWebpackPlugin = require('html-webpack-plugin')  //将html打包
const ExtractTextPlugin = require('extract-text-webpack-plugin')     //打包的css拆分,将一部分抽离出来  
const CopyWebpackPlugin = require('copy-webpack-plugin')
// console.log(path.resolve(__dirname,'dist')); //物理地址拼接
module.exports = {
    entry: './src/index.js', //入口文件  在vue-cli main.js
    output: {       //webpack如何输出
        path: path.resolve(__dirname, 'dist'), //定位，输出文件的目标路径
        filename: '[name].js'
    },
    module: {       //模块的相关配置
        rules: [     //根据文件的后缀提供一个loader,解析规则
            {
                test: /\.js$/,  //es6 => es5 
                include: [
                    path.resolve(__dirname, 'src')
                ],
                // exclude:[], 不匹配选项（优先级高于test和include）
                use: 'babel-loader'
            },
            {
                test: /\.less$/,
                use: ExtractTextPlugin.extract({
                    fallback: 'style-loader',
                    use: [
                    'css-loader',
                    'less-loader'
                    ]
                })
            },
            {       //图片loader
                test: /\.(png|jpg|gif)$/,
                use: [
                    {
                        loader: 'file-loader' //根据文件地址加载文件
                    }
                ]
            }
        ]                  
    },
    resolve: { //解析模块的可选项  
        // modules: [ ]//模块的查找目录 配置其他的css等文件
        extensions: [".js", ".json", ".jsx",".less", ".css"],  //用到文件的扩展名
        alias: { //模快别名列表
            utils: path.resolve(__dirname,'src/utils')
        }
    },
    plugins: [  //插进的引用, 压缩，分离美化
        new ExtractTextPlugin('[name].css'),  //[name] 默认  也可以自定义name  声明使用
        new HtmlWebpackPlugin({  //将模板的头部和尾部添加css和js模板,dist 目录发布到服务器上，项目包。可以直接上线
            file: 'index.html', //打造单页面运用 最后运行的不是这个
            template: 'src/index.html'  //vue-cli放在跟目录下
        }),
        new CopyWebpackPlugin([  //src下其他的文件直接复制到dist目录下
            { from:'src/assets/favicon.ico',to: 'favicon.ico' }
        ]),
        new webpack.ProvidePlugin({  //引用框架 jquery  lodash工具库是很多组件会复用的，省去了import
            '_': 'lodash'  //引用webpack
        })
    ],
    devServer: {  //服务于webpack-dev-server  内部封装了一个express 
        port: '8080',
        before(app) {
            app.get('/api/test.json', (req, res) => {
                res.json({
                    code: 200,
                    message: 'Hello World'
                })
            })
        }
    }
    
}

1. Front-end 환경 구축

npm이나 Yarn을 사용하여 webpack을 설치합니다

npm install webpack webpack-cli -g 
# 或者 
yarn global add webpack webpack-cli

webpack이 둘로 나누어지는 이유 파일은 어디에 있나요? webpack 3에서는 webpack 자체와 cli가 동일한 패키지에 있었지만 버전 4에서는 더 잘 관리하기 위해 둘을 분리했습니다.

새 webpack 폴더를 만들고 그 아래에 try-webpack을 만든 다음(init 중 프로젝트 이름이 설치 패키지와 동일한 이름을 갖지 않도록) webpack을 초기화하고 구성합니다.

 npm init -y  //-y 默认所有的配置
 yarn add webpack webpack-cli -D  //-D webpack安装在devDependencies环境中

2. webpack 배포

위에서 구축한 환경 프로젝트에서 package.json으로 이동하여 스크립트를 구성하고 webpack

  "scripts": {
    "build": "webpack --mode production" //我们在这里配置，就可以使用npm run build 启动我们的webpack
  },
  "devDependencies": {
    "webpack": "^4.16.0",
    "webpack-cli": "^3.0.8"
  }

이 웹팩 실행 환경을 구성하도록 하고 vue-cli를 연결합니다. 일반적으로 vue-cli를 사용하면 프로젝트를 구성하고 생성하는 데 자동으로 도움이 됩니다. src 아래에서 프로젝트를 개발하고 마지막으로 npm run build를 사용하여 dist 디렉터리를 패키징하고 생성합니다. 아직도 기억하실지 모르겠지만, 다음으로 넘어가서 실제 과정을 느껴보도록 하겠습니다.

3. npm이 build를 실행할 때 일어난 일

루트 프로젝트 아래에 try-webpack을 사용하여 새 src 디렉터리를 만듭니다. src 디렉터리에 새 index.js 파일을 만듭니다. 사례에 초점을 맞춰 어떤 코드든 작성할 수 있습니다.

const a = 1;

작성 후 터미널에서 npm run build 명령을 실행하면 With를 저장하는 새 dist 디렉터리가 추가되는 것을 볼 수 있습니다. webpack으로 패키징된 main.js 파일. 이는 vue-cli에서 수행하는 작업과 동일합니다.

4. Webpackp 구성 프로세스

개발 중에 일반적으로 src 아래에 어떤 파일을 패키징하나요? 실제로 vue-cli 프로젝트 src에는 다음 사항만 있다는 것을 기억할 수 있습니다:

• HTML, css, js need forPublishing

• css precompiler stylus, less, sass

• es6

• 그림 리소스 .png, .gif, .ico, .jpg

• require between files

• alias @ 및 기타 modifiers

그런 다음 이를 다음과 같이 나누어 보겠습니다. webpack 구성을 설명합니다. .config.js를 webpack에 추가하고 단계에 따라 프로세스 라인을 단계별로 완료하세요.

✍️webpack의 HTML 구성

프로젝트의 루트 디렉터리인 try-webpack 아래에 새 webpack.config.js 파일을 만들고 commonJS 모듈식 메커니즘을 사용하여 출력한 후 새 index.html을 만듭니다.

module.exports = {}

vue-cli의 내보내기 출력 디렉토리에 있는 main.js와 동일한 항목 항목을 구성합니다. 웹팩을 공장으로 이해하면, 공장에 각종 원자재를 투입하고, 공장에서 일련의 포장작업을 거쳐 포장된 물건을 출력하고, 이를 판매(온라인)하는 것과 같습니다.

const path = require('path'); //引入我们的node模块里的path
//测试下 console.log(path.resolve(__dirname,'dist')); //物理地址拼接
module.exports = {
    entry: './src/index.js', //入口文件  在vue-cli main.js
    output: {       //webpack如何向外输出
        path: path.resolve(__dirname, 'dist'),//定位，输出文件的目标路径
        filename: '[name].js' //文件名[name].js默认，也可自行配置
    },

HTML 패키징 html-webpack-plugin을 설치하고 도입해야 합니다

yarn add html-webpack-plugin -D //在开发环境中安装
const HtmlWebpackPlugin = require('html-webpack-plugin')  //引入打包我们的HTML

module.exports에서 플러그인(플러그인)을 구성합니다:

 plugins: [  //插进的引用, 压缩，分离美化
        new HtmlWebpackPlugin({  //将模板的头部和尾部添加css和js模板,dist 目录发布到服务器上，项目包。可以直接上线
            file: 'index.html', //打造单页面运用 最后运行的不是这个
            template: 'src/index.html'  //vue-cli放在跟目录下
        }),
    ],

구성 후 터미널에 npm run dev를 입력하면 webpack이 패키지합니다. html 좋습니다. 그러면 js가 자동으로 가져옵니다.

    <p>Hello World</p>
<script></script>

dist 디렉토리를 라이브 서버하고 8080 포트를 시작하면 Hello World를 볼 수 있습니다. 이것은 페이지의 온라인 버전입니다.

위 내용은 webpack4.0 구성에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!