webpack是一款强大的加载器兼打包工具,它能把各种资源,例如JS(包含JSX)、coffee、样式(含less/sass)、图片等都作为模块来使用和处理,优势如下:
1.webpack是以commonJS的形式来书写,但对AMD/CMD的支持也很全面,方便旧项目进行代码迁移
2.能不能能不能能不能被模块化的不仅仅是js,还包括各种资源文件
3.开发便捷,能替代部分gulp的工作,比如打包、混淆压缩、图片转base64等
4.扩展性强,插件机制完善,特别是支持React热插拔
下载依赖 webpack解析包 和服务
npm install webpack --save-dev
使用webpack配置文件
- 初始化git
mkdir webpack-demos cd webpack-demos git init
- 初始化项目
npm init -y
- 增加 .gitignore
- 创建文件
touch.gitignore
- 在文件中增加以下内容
node_modules .idea lib
- 创建文件
-
在项目根目录下创建src和build目录
src目录存放源码,build目录存放编译打包之后的资源mkdir src build
-
创建webpack的配置文件
touch webpack.config.js
配置webpack.config.js
//webpack 必须采用common.js写法 let path=require('path'); //node里专门处理路径用的,以当前路径解析出一个相对路径 let HtmlWebpackPlugin=require('html-webpack-plugin'); module.exports={ entry:'./src/main.js',//打包的入口文件,webpack会自动查找相关的依赖进行打包,当多个文件的时候用对象 entry:{main:'./src/main.js',main2:'./src/main2.js'},下面的filename:[name].js output: { filename: "bundle.js" ,//打包后的文件名字 path:path.resolve('./dist'), //dist必须是一个绝对路径 引入path路径 然后通过path.resolve('./dist')方法解析出一个绝对路径 }, // 模块的解析规则 - js 匹配所有的js 用babel-loader转义 排除掉node_modules module:{ rules:[ {test:/\.js$/,use:'babel-loader',exclude:/node_modules/}, //数组里的loader顺序是从右往左写 {test:/\.css$/,use:['style-loader','css-loader']}, {test:/\.less$/,use:['style-loader','css-loader','less-loader']}, //?limit=8192 转化base64 只在8192字节以下转化,其他情况输出图片 file-loader是 url-loader里面的 {test:/\.(jpg|png|gif)$/,use:'url-loader?limit=8192'}, {test:/\.(eot|svg|woff|woff2|wtf)$/,use:'url-loader'}, {test:/\.vue$/,use:'vue-loader'} ] }, plugins: [ //自动在dist文件夹里生成index.html new HtmlWebpackPlugin({ template:'./src/index.html', //使用的模板 // filename:'login.html' //产出的文件名字,不写默认就是index.html }) ] }
注意:webpack.config.js这个文件名是定死的,修改了会报错,另外如果不按这个命名,那么在webpack运行的时候 要通过 --config这个参数指定配置文件:比如:webpack --config conf.js
修改package.json
"scripts":{
"build":"webpack"
}
执行命令进行编译
npm run build
build目录下会新增一个bundle.js文件,里面就存放着打包后的目录
loader
anzhuang loader解析器
添加 .babelrc 文件
内容如下
{
“presets”:["es2015","stage-0"],
"plugins":[]
}
devServer
webpack-dev-server 是一个web服务器,可以预览项目,并且当修改源码后可以实时刷新页面server配置
安装devServer
npm install webpack-dev-server --save-dev
修改package.json
"scripts":{
"dev":"webpack-dev-server"
}
配置 webpack.config.js
devServer:{
stats:{colors:true}, //显示颜色
port:8080, //端口
contentBase:'build',//指定静态文件的根目录
}
最后一步 执行命令进行启动服务
npm run dev
启动此服务的时候,编译后的产出文件存放在内存里的,在build目录下看不见,但也不会删除原来已经有的文件
《完》
作者:soliderMan
链接:https://juejin.im/post/5a16bdf251882531e9447b57
来源:掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。