O Webpack uso básico

Este artigo é baseado em um método comum em Webpack, você quer saber o código mais profundo possível visualizar o Webpack site oficial

https://www.webpackjs.com/

Aqui está terminando Webpack próprio mapa mente pode compreender rapidamente o uso e finalidade de Webpack

construir o diretório de arquivos do projeto

1, Webpack construir um servidor local

npm install --save-dev webpack-dev-server
加入到webpack的配置文件（webpack.config.js）
 devServer: {
    contentBase: "./public",//本地服务器所加载的页面所在的目录
    historyApiFallback: true,//不跳转
    inline: true//实时刷新,
    Port:9090//不写默认是8080
  } 
在package.json中的scripts对象中添加如下命令，用以开启本地服务器：
"server": "webpack-dev-server --open"

2, usando os carregadores
os Carregadeira Webpack é um dos mais recursos interessantes fornecidos pelo.
Usando loader diferente, Webpack têm a capacidade de chamar scripts ou ferramentas externas para implementar o processamento de arquivos em diferentes formatos, tal análise é css SCSS convertida, ou a próxima geração de arquivos JS (ES6, ES7) convertido para um navegador moderno arquivo JS-compatível.
Carregadeira requer instalação e necessidade separado para ser configurado em módulos em webpack.config.js palavras-chave
Webpack configuração do carregador tem dois objetivos:

1. teste para um jogo de propriedade carregadores expandir o nome do arquivo que está sendo processado expressão regular (obrigatória)
2. Quando o uso do atributo da conversão, que deve carregadeira uso.
   loader: nome loader (must)
   . 3, a incluir / excluir a: arquivo deve ser adicionado processados manualmente (pasta) ou bloco não são processados (pasta) (opcional);

module: {
    rules: [
      { test: /\.txt$/, use: 'raw-loader' }
    ]
  }

O significado das informações acima configuração:
Webpack compilador, quando você encontrar '() / instruções de importação requerem ser determinada com um' .txt 'caminho', antes de embalá-lo, primeiro convertê-lo para usar matéria-loader. "

3, Babel
Babel é na verdade uma compilação de plataforma de JavaScript, que pode ajudá-lo a compilar o código para atingir os seguintes objectivos:

• Então você pode usar o código mais recente JavaScript (ES6, ES7 ...), e não controlar se o novo padrão é totalmente suportado navegador usado atualmente;
• Então você pode usar a linguagem baseada em JavaScript foi expandido, como de Reagir JSX;
  Babel é realmente vários pacote npm pacote modular, sua função principal está localizado chamado babel-core em, Webpack pode colocá-lo em uma integração pacote diferente utilizados em conjunto, para cada função ou expandir sua necessidade, você precisará instalar um pacote separado (mais utilizado é resolvido ES6 do pacote de-babel-env predefinido e determinação JSX do pacote babel-preset-reagir).
  A montagem de uma pluralidade de NPM descartável // módulos dependentes, com um espaço entre os módulos

npm install --save-dev babel-core babel-loader babel-preset-env babel-preset-react
// 配置Babel、允许使用ES6以及JSX的语法
module: {
rules: [
{
    test: /(\.jsx|\.js)$/,
    use: {
        loader: "babel-loader",
        options: {
            presets: [
                "env", "react"
            ]
        }
    },
   exclude: /node_modules/
}
]
}
*****babel-loader和babel-core版本要相邻不然会报错*****
babel-loader 8.x对应babel-core 7.x
babel-loader 7.x对应babel-core 6.x