作为一个前端,不会webpack不行啊,今天学习一下,感觉似懂非懂,记录一下吧
1.安装webpack
1).创建一个文件夹,命令行进入该文件夹,创建package.json文件npm init
2).安装webpack环境 npm install webpack --save-dev
2.打包js文件
1).创建一个新的js文件 index.js
2).命令行 打包 webpack index.js(打包的js文件名) index.bundle.js(打包之后的js文件名)
3.打包css文件
1).因为webpack不支持css样式 需要css-loader和style-loader来进行解析 安装 npm install css-loader style-loader --save-dev;
2).引入方式
4.注意
1).我们每次修改完文件之后都需要运行一次打包命令 重新打包才能生效
2).为了避免每次修改完文件都需要重新运行打包命令,我们可采取下面方法来进行加载loader
webpack index.js index.bundle.js --module-bind 'css=style-loader!css-loader' 使用module绑定的方式来绑定loader
webpack index.js index.bundle.js --module-bind 'css=style-loader!css-loader' --watch 自动更新自动打包命令