1 建立项目文件夹 : webpack_test
2 建立文件 package.json
3 装置webpack
npm install webpack -g npm install webpack –save-dev
webpack 只能打包js 或 json 文件,要打包其他范例的文件,须要用到打包东西loader
webpack 打包js文件
1 项面前目今新建src/js/entry.js文件,文件名本身定义
2 实行 webpack src/js/entry.js dist/js/bundle.js 敕令, 示意将此js文件打包到dist/js/bundle.js文件下,这个文件夹体系会新建出来
webpack 打包json 数据
新建 test.json文件,内里写入数据,实行敕令与打包js类似
webpack.config.js设置
新建webpack.config.js文件,设置该文件
const path=require(‘path’);
module.exports = {
entry: ‘./src/js/entry.js’,
output:{
filename:'bundle.js',
path: path.resolve(_dirname,'dist/js/')
}
}
当设置好这个文件后,直接实行webpack敕令,就能将一切须要打包的文件打包到dist/js/bundle.js里
接上面增加以下代码: 热加载设置
devServer:{
contentBase: 'dist/' //webpack-dev-server默许服务于根途径下的index,增加这句示意服务于dist目录下的
}
运用插件
经常使用插件 : html-webpack-plugin 依据模板html天生引入script的页面 clean-webpack-plugin 消灭dist文件夹