conceito

Essencialmente, o webpack é uma ferramenta de empacotamento de módulo estático para aplicativos JavaScript modernos . Ao mesmo tempo, o webpack também é uma excelente ferramenta de construção de front-end, um empacotador de recursos estáticos, que pode realizar análises de recursos estáticos com base nas dependências de módulos e empacotar e gerar rapidamente recursos estáticos que podem ser identificados diretamente pelo navegador correspondente!

Ponto de entrada: Indique qual módulo webpack deve usar como o início da construção de seu gráfico de dependência interna .

Saída : diga ao webpack onde enviar os pacotes que ele cria e como nomear esses arquivos.

Leitura de tipo de arquivo (carregador) : apenas arquivos JavaScript e JSON podem ser lidos, e o carregador pode import importar qualquer tipo de módulo

Plug - ins : os carregadores são usados para converter certos tipos de módulos, enquanto os plug-ins podem ser usados para realizar uma ampla gama de tarefas. Incluindo: otimização de pacotes, gerenciamento de recursos, injeção de variáveis de ambiente.

Modo de ambiente (modo) : Ao selecionar development, production ou none um de, para definir os mode parâmetros, você pode habilitar a otimização integrada do webpack no ambiente correspondente. o valor padrão é production

Compatibilidade do navegador: carregue o polyfill com antecedência , o IE8 e versões anteriores não são compatíveis. import() e require.ensure() necessidades do webpack Promise

Ambiente: o webpack 5 roda na versão Node.js v10.13.0 +.

Processar:

Instale o ambiente webpack:

1) O console do diretório raiz do projeto executa o comando: npm init, gera um arquivo package.json, npm é a ferramenta de gerenciamento de pacote que vem com a nova versão do node e package.json é equivalente a uma lista, um arquivo que registra bibliotecas dependentes e informações do projeto.

2) Comando de instalação global webpack: npm i webpack webpack-cli -g, instalação global significa que o comando pode ser usado em qualquer pasta de projeto no ambiente do sistema e a primeira execução do computador mac deve exigir direitos de administrador, sudo npm i webpack webpack-cli -g Se a velocidade da Internet for muito lenta, é recomendável alternar para a fonte espelho Taobao.

3) Comando webpcak de instalação local: sudo npm i webpack webpack-cli -D, o módulo baixado é injetado na pasta ./node_nodules neste projeto, não afetará outros projetos e desempenhará um papel independente!

Núcleo do conceito:

Arquivo de entrada

Instruções de arquivo de entrada , configure qual arquivo de entrada o wepack usa para análise de embalagem e outros parâmetros.

module.exports = {
   entry: {   //入口
        suibian: './src/e.js',
        f: './src/f.js',
        myFile: './src/index.js'   //定义多个文件的路径
    },
}

Saída. Exportar arquivo

Exporte as instruções do arquivo , configure o caminho e os parâmetros do recurso de saída do pacote de recursos empacotado pelo webpack .

 output: {   //出口
        path: path.resolve(__dirname, 'dist'),
        filename: '[name].[hash:8].js',  //模块标识符的 hash
    },

Plugins. Plugins

Os plug-ins podem permitir que o webpack execute uma gama mais ampla de tarefas mais complexas, configure a otimização de empacotamento e outras funções relacionadas. Os plug-ins correspondentes precisam ser introduzidos separadamente antes do uso.

1）处理html文件插件：
// 无template属性时，默认在输出目录创建一个空的html文件，并将打包后的资源引入其中。template指明文件时，则复制文件，并引入打包后的资源。
new HtmlWebpackPlugin({
  template: "./src/index.html",
  minify: {
    collapseWhitespace: true, // 清除空行缩进
    removeAttributeQuotes: true, // 清除注释
  },
}),
2）抽离CSS成单独文件插件：
// 处理CSS从js文件中抽离生成独立文件
new MiniCssExtractPlugin({
   filename: "static/css/app.css", // 文件输出目录
 }),
3）压缩CSS插件：
// Css压缩插件，需要在package.json中定义sideEffects属性防止它压缩去除掉一些css，less等文件。
new OptimizeCssAssetsWebpackPlugin(),

4）PWA离线访问技术插件：
// PWA离线缓存技术，优化使用体验，网络断开后刷新网页仍能够加载得到已经缓存的资源文件，依靠service Workers技术，插件执行后生成一个servicework配置文件，需要在入口文件中注册，兼容性判断。
new WorkboxWebpackPlugin.GenerateSW({
  clientsClaim: true, // 帮助servicework快速启动
  skipWaiting: true, // 删除旧版本使用最新的serviceworker技术
}),
5）忽略库并动态引入第三方库插件：
/**
 * dll动态引入单独库
 * 通过manifest.json文件中的映射关系，构建打包时进行忽略打包哪些库，再通过addAssetHtmlWebpackPlugin引入独立打包的库。
 */
new webpack.DllReferencePlugin({
  manifest: resolve(__dirname, "dll/manifest.json"),
}),
new addAssetHtmlWebpackPlugin({
  filepath: resolve(__dirname, "dll/jquery.js"),
}),

Modo. Configuração do ambiente de desenvolvimento

Configure o modo de trabalho do webpack. Existem modos de desenvolvimento e produção. O ambiente de desenvolvimento é simples de configurar, para que o código possa ser executado localmente. O modo de produção é complicado e precisa ser processado quando o site está em execução e online.

// modo: "desenvolvimento",
modo: "produção", // definir o ambiente de trabalho do webpack

WebPack (ferramenta de empacotamento de módulo estático para aplicativos JavaScript modernos)

conceito