webpack入门

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 文件夹