webpack怎么打包js、css文件

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