webpack打包Js文件

1.如何通过webpack打包js文件

• 1.安装webpack

 npm init -y
npm install --save-dev  webpack
npm install --save-dev webapck-cli

• 2.在终端输入打包命令

 npx webpack index,js

a .
注意点:index.js就是需要打包的文件打包之后的文件会放到dist目录中, 名称叫做main.js
b .
这句指令的含义是: 利用webpack将index.js和它依赖的模块打包到一个文件中
其实在webpack指令中除了可以通过命令行的方式告诉webpack需要打包哪个文件以外,
还可以通过配置文件的方式告诉webpack需要打包哪个文件

• 各个文件的关系和如何导入

image.png
image.png
image.png

2 .通过配置webpack文件可以减少命令行

   2. 1 刚才我们在打包时输入npx webpack  index.js

这句指令的含义是将webpack将index.js和他依赖的模块打包到一个文件中
其实webpack打包指令除了可以通知要打包哪些文件，还可以通过配置
2.2webpack常见配置

• entry:需要打包的文件
• output ：打包之后输出的路径和文件
• mode:打包模式 //development|| production
• development打包后不会压缩js代码，production会压缩js代码

3. 配置webpack.config.js

const path=require('path')
module.exports={
       //devtool:'' cheap-source-map"
      //mode:打包模式
      mode:'development',
     //entry:需要打包的文件
    entry:'./index.js',
     output:{
              // filename:指定打包后js文件的名字
             filename:'bundle.js',
             //path:指定打包后的文件放在那里
              path:path.resolve(_dirname,"bundle")
    }
}

刚才是输入npx webpack index.js 那么现在就可以输入npx webpack了
如果想要使用其他指令，可以直接修改的package.json的scirpts

scripts:{
      "test" : "npx  webapck  --config  webapck.config.js "
}

以后再打包的时候，就可以直接使用npm run test了；

当然，还可以看下devtool的取值，他生成的sourcemap映射表，对打包后的包的大小和打包速度有很大影响