Webpack

Webpack是一个Javascript应用程序的静态的打包器，其功能包括：将多个Javascript文件进行整合和整理之间的依赖关系，以及实现将高版本的语言转化成低版本的语言（webpack只会转化部分的高版本语言，如需转换所有的还得需要babel转换器），所以需要在loader系统上使用babel转换器。也可构建非JS内容，如图片等 。

 

 

使用：

　　全局安装了webpack之后并不能使用webpack命令还得安装webpack-cli ，因为webpack4将一些命令放到了webpack-cli中了。

npm install --save-dev webpack-cli -g

　　webpack的入口和出口文件配置：

const path = require('path');

module.exports = {
//   entry: path.join(__dirname,"./src/main.js"), webpack3
  entry: "./src/main.js",//可以是字符串和字符串数组
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  }
};

　　使用命令进行文件的转化：

npx webpack 　　//用在初始安装的webpack文件上

 webpack --mode development

 　　可以使用npm 脚本来命令：

//package.json中的scripts中添加 

"scripts": {
    "build": "webpack"
  },
npm run bulid 直接命令

 　　在JS文件中加载css文件内容

//webpack.ocnfig.js 

const path = require('path');

module.exports = {
//   entry: path.join(__dirname,"./src/main.js"), webpack3
  entry: "./src/main.js",//可以是字符串和字符串数组
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
   module: {
    rules: [
        {
        test: /\.css$/, //以 .css 结尾的全部文件，都将被提供给 style-loader 和 css-loader。
        use: [
          'style-loader',
          'css-loader'
        ]
      }
    ]
  }
};

 webpack和babel下载的时候 ：版本必须得安装正确 否则容易出现各种错误，总之想看文档。https://www.npmjs.com/package/babel-loader/v/8.0.5  按照一样的操作即可