webpack打包
webpack是什么
webpack是javascrip应用程序的静态模块打包器(module bundler) html,js,css,图片
webpack能做什么
模块化打包
css,html,js变成一行,去除注释,去除多余引号
为什么要选择webpack
- webpack 进行打包可以解决由于加载太多脚本导致的网络瓶颈,增加脚本的可读性,避免整体文件出现问题。
- 支持CommonJS和EMS
- 在node.js的基础上运行,可以在浏览器环境之外使用
webpack打包
webpack本身是打包js的,如果想要打包其他文件则需要进行相关的配置
配置
四个核心概念
- 入口(entry)
- 输出(output)
- 装载机loader(loader)
- 插件(plugins) 其中入口和出口有默认的文件
配置文件
命名:webpack.config.js
入口与出口
const path = require("path"); //必须要引入 module.exports={ entry: './src/index.js', //出口为src文件夹下的index.js文件 output:{ path: path.resolve(__dirname,'dist'), //出口为dist filename: 'bundle.js' //加上hash打包之后的文件就出现很多bundle-[hash] //打包的生成文件名 } };
在这时还没有进行配置完成,使用命令webpack就可以看到,该文件夹下木木生成指定的dist文件夹来保存打包后的文件
loader
loader让webpack能够处理非js文件(loader可以import导入任何雷子那个的模块)
loader有很多,可以选择自己需要的进行下载,其中最好吃那个用的就是打包css文件就需要css-loader和style-loader,使用use进行使用
loader使用
- loader安装
npm install style-loader css-loader -S
- loader配置
插件
插件之赐你个范围更广的任务
插件能够有效地打包,压缩除了js文件之外的css,html,图片等文件。
例:html-webpacl-plugin
- 安装
npm install html-webpaxk-plugin -S
- 使用webpack.config.js进行配置
打包类型
/*修改package.json里面的test内容进行修改,就可以打包后成生产环境下的代码文件,但是是未压缩版*/ "scripts": { "test": "webpack --mode development" },
其中test的名称可以修改,接下来输入命令webpack test(根据自己的命名进行相对应的修改),就可以进行打包
js的压缩
- js的压缩需要下载包,另外css的导入需要在js文件中进行
- 安装
npm install uglifyjs-webpack-plugin --save
- 进行配置
//首先需要进行导入 const uglify=require('uglifyjs-webpack-plugin'); //在plugin中进行插入 plugins:[ new uglify() ]
webpack的img标记打包
- loader需要补充使用,该loader支持图片,首先需要安装该liader
npm install html-withimg-loader --save
- 进行插件的导入,配置
rules:[ ` { test:/\.html$/, use:'html-withimg-loader' } ]
webpack-dev-server
- 本地服务器 安装
npm install webpack-dev-server -S
- 配置 在module.exports中加入devServer进行相关配置
devServer: { contentBase: './dist', //选择路径,本地服务路径 port: '8080', //设置端口,默认为8080 inline:true //实时刷新 }
然后在package文件中进行配置
"'scripts": { dev: "webpack-dev-server --open --inline" //其中--open是自动打开,--inline设置为true之后就是自动刷新 }
运行npm run dev可以看到在8080端口本地浏览器打开项目
css提取
- css提取需要下载插件
nm install extract-text-webpack-plugin@next -S
next一定要有,否则会分离失败
- 然后在进行配置
//首先需要引入插件 const extractTextWebpackPlugin=require('extract-text-webpack-plugin'); //然后在进性配置 rules: [ { test: /\.css$/, //$为结尾,\.除了空格之外的任意字符 use: extractTextWebpackPlugin.extract({ fallback:'style-loader', use:[{ loader:'css-loader', options:{ //css代码压缩为一行 minizemize:true } }], publicPath:'../' //如果publicPath没有写,图片的地址就会出现错误 }) } ] //在plugins中配置 plugins:[ new extractTextWebpackPlugin('./css/[name].css') ]