webpack入门

29次阅读

共计 737 个字符,预计需要花费 2 分钟才能阅读完成。

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

正文完
 0