1、安装webpack
npm install webpack -g
注意:npm太慢的话切到国内镜像(淘宝有的自行百度)
2、打包示例:
两个js文件(index.js、hello.js)、
一个css文件(style.css)、
一个html文件(index.html)、
一个配置文件(webpack.config.js:配置文件名称必须为这个,打包的时候webpack会自动找到这个文件,然后根据里面设置的配置信息去打包)
要完成的是对js和css文件打包然后生成一个js,引入到index.html中,如图:
四个文件如上图;注意webpack.config.js中设置的参数,我这里只是打包js和css文件,如果你想要打包其他的去参考一下webpack官网,
3、在当前目录执行webpack ,在执行过程中如果第一次他可能让你安装webpack-cli 直接yes 就行;打包命令如图
注意:
// npm install --save-dev css-loader
// npm install --save-dev style-loader
// npm install --save-dev ts-loader
上面的这三个东西不要忘记在当前目录安装,否则会提示模块不存在;
4、在index.html引入my-first-webpack.bundle.js文件,如图:
他会自动生成dist文件夹并且在该文件夹下面生成 my-first-webpack.bundle.js文件,浏览器打开看一下是否引入成功
我们在hello、index写的js和style写的css全部都实现,最后看一下我们生成的打包后的文件:如图
有问题+qq:997136555