webpack是一款强大的前端工具,他可以帮助我们更好的构建代码
webpack安装:
npm install webpack -g
生成webpack.config.js文件
touch webpack.config.js
打开文件复制配置项
module.exports= { devtool: 'sourcemap', entry:'./js/entry.js', output:{ filename:"bundle.js" } };
entry为入口文件,filename为生成的文件名称
安装第三放js库 (举例为jQuery)
npm install jquery --save-dev
loaders使用 将css样式打包进去
安装cssloder
npm install css-loder style-loder --save-dev
css-loader style-loader babel-core babel-loader babel-plugin-transform-runtime babel-preset-es2015 babel-preset-stage-0 babel-runtime --save-dev
npm install vue-template-compiler vue vue-loader vue-html-loader vue-style-loader --save-dev
module: {
rules: [
{
test: /\.css$/,
use: [
{
loader: "style-loader"
},
{
loader: "css-loader",
options: {
modules: true
}
}
]
},
{
test: /\.jsx$/,
loader: "babel-loader", // Do not use "use" here
exclude: /node_modules/,
options: {
presets: ['es2015','stage-0'],
plugins: ['transform-runtime']
}
}
]
},
webpack --display-modules --display-reasons(打印引进了那些js,和引进路径)
热加载
npm install webpack-dev-server webpack-dev-middleware webpack-hot-middleware --save-dev
安装完成后的热加载命令
webpack-dev-server --inline --hot
webpack官方提供的分析工具网址
http://webpack.github.io/analyse/
命令webpack --profile --json > stats.json