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