什么是webpack
简单来说webpack就是一种模块加载器兼打包工具。侧重于模块加载
webpack如何使用
webpack的使用简单来说就是:
装webpack,抄webpack文档(官网上的四个例子),装webpack插件,抄webpack插件文档到webpackconfig.js,最后npm run一下就可以用了。(具体过程太麻烦了,上面的流程就是最精简的了)
举例说明
在index.html中加入以下引用
<script src="dist/bundle.js"></script>
webpackconfig.js文件
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve('dist')
},
module: {
rules: [
{
test: /\.css$/,
use: [
'style-loader', 'css-loader', 'autoprefixer-loader'
]
},
{
test: /\.js$/,
exclude: /node_modules/,
use: [
"babel-loader",
"eslint-loader",
],
},
]
},
};
index.js文件
import '../vendors/loaders.min.css'
import './reset.css'
import './index.css'
import avReset from './avReset'
import loadSongs from './loadSongs'
import tabs from './tabs'
import searchSongs from './searchSongs'
avReset();
tabs(".tabs",".mainPages");
loadSongs();
searchSongs();
avReset.js文件
export default function avReset() {
var APP_ID = 'zKM1TH8kc8MSMoh0pd6NcUYY-gzGzoHsz';
var APP_KEY = 'SutiQq6E6jY1WAwkDOgK4RpB';
AV.init({
appId: APP_ID,
appKey: APP_KEY
});
}