初始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 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']

// }

// ]