webpack核心概念

初始webpack

1 新建一个文件夹 新建一个111.html

2 在文件夹中新建一个src放置一个index.js和module.js

 3 初始化 npm init

4  安装局部webpack       npm i --save-dev webpack webpack-cli   

 5  然后新建 webpack.config.js 编写配置文件

 6  npx  webpack编译

entry和output

etry 配置入口文件

- 作用：告诉webpack模块化的入口文件在哪里

- webpack 可以通过入口文件 找到所有的模块化文件，进行编译打包处理

项目分类

- 单页面应用一个 html一个入 口文件

- 多页面应用多个html多个入口文件entry

~~~

如何配置单入口

~~~js

如何配置多入口

~~~js

~~~

### output

>output 配置出口文件

>作用：告诉webpack 编译打包后的代码，应该放在哪里？

>换句话：配置是打包后的代码，放在那个文件及文件夹以内

在entry文件夹中创建index.html

然后初始化npm init

 新建一个src

在src新建几个js文件 编写es6代码 导入导出

新建一个webpack.config.js文件

 

 然后安装webpack插件

npm install -D babel-loader @babel/core @babel/preset-env webpack

最后运行npx  webpack

loader

 <!-- 需求：在webpack中使用babel 将高版本的js编译成低版本的js -->

        // 什么是 webpack loader

        //loader有nge

        //作用：可让webpack解决一些非js的模块

        //babel-loader

     // 作用: 在webpack 中使用babel,将高版本js编译为低版本

    // npm init

    // npm install -D babel-loader @babel/core @babel/preset-env webpack

 

    //新建 .babelrc文件

//     {

//     "presets": [

//     " @babel/preset-env"  json中的安装插件名字

//     ]

// }

    

    //使用loader:

//     module: {

//   rules: [

//     {

//       test: /\.m?js$/,

//       exclude: /(node_modules|bower_components)/,

//       use: {

//         loader: 'babel-loader',

//         options: {

//           presets: ['@babel/preset-env']

//         }

//       }

//     }

//   ]

// }