webpack打包基本使用与认识

webpack基本使用

模块化方式存在兼容性问题 

 

但是有一些兼容性问题，并没有导入成功，于是使用webpack转化为不兼容性代码，转换之后屏蔽兼容性

development开发模式不会进行压缩代码

production模式生产模式会进行压缩和混淆代码

输出了main.js文件 

 

main.js没有兼容性

 

 production模式，进行了代码的压缩

 webpack打包没有配合输入输出

就默认打包src目录下的index.html文件，

输入dist目录的main目录

 

配置webpack自动打包功能基本使用

 

注意，此bundle.js是虚拟的隐藏的文件，存在于磁盘中，放在根目录中

访问是直接输入地址/bundle.js即可

配置预览生成页面

（默认直接打开index.html，而不用再次点击src目录）

将src里面的index.html复制到根目录，则会直接打开index.html

实现上述效果就需要用到html-webpack-plugin生成预览页面（实现如下：）

 在webpack.config.js中配置 

配置自动打包参数-----打包完成自动打开浏览器页面配置

 

注意：只要修改了配置文件，都需要关闭重新启动才可执行生效！！！