webpack4.0--安装操作
一、安装webpack
1.全局安装webpack npm install -g webpack
2.初始化项目目录 npm init //可以一路回车
3.在当前项目安装webpack cnpm i webpack
4.安装webpack-cli cnpm i webpack-cli -D
,-D在开发环境中局部安装
- 管理webpack命令行的工具
- webpack3中,webpack和CLI在同一个包里,但webpack4中,分开的,所以,如果—D 不行,就需要全局安装,-g
二、项目配置,打包及引用
1.配置mode,有production和development两个
webpack --mode development
2.项目新建
mkdir/md src //删除文件是rd/s/q
type nul> src/index.js //创建入口文件index.js
3.项目打包及引用
src/index.js创建完之后,运行webpack --mode development/production
会自动将src/index.js文件打包到dist/main.js文件(自动生成dist和main.js)
然后,建立html,引用dist/main.js文件即可
- src/index.js 是开发文件,在开发环境使用,可以用ES2017等,但用户环境不支持
- dist/main.js 是最终部署的可以再用户浏览器上正常运行的代码
- webpack 打包就是编译代码使的其可以再用户界面上使用
4.其他参数配置
--watch 实时刷新 文件修改后自动打包
但是它不能实时刷新浏览器,如果需要则安装webpack-dev-server,它的作用是修改后发布到服务器上
--progress 查看进度
--display-modules 显示隐藏的模块
--colors 彩色显示
--display-reasons 显示打包原因
webpack --mode development --watch --progress --display-modules --colors --display-reasons
三、webpack-dev-server--浏览器实时刷新
- 全局安装:
cnpm i -g webpack-dev-server
- 在项目中安装并且将依赖写入package.json
npm install webpack-dev-server --save-dev
- 写入自动刷新命令
webpack-dev-server --mode development --output-public-path dist
,指定publicPath,dist是index.html文件所引用js的地址目录.(注意,这里是将文件打包保存在内存中,没有写入磁盘) - 默认端口8080,如果需要修改则
webpack-dev-server --port 3000
,可以直接在webpack.config.js配置文件中配置devServer属性,开启热更新和port - 启动服务,
localhost:8080
,显示的是根目录的index.html文件,可以修改index.js可以看到页面在实时自动刷新。如果根目录没有index.html,那么将会列出根目录所有文件夹,且页面就不能实时刷新了。
四、打包css
css-loader 处理css文件
style-loader 将css-loader处理之后的文件作为标签<style>
插入html
处理css文件的两种方式:
- index.js文件里输入
require('style-loader!css-loader!./index.css')
,这里的index.css和index.js同级 - 输入命令行
webpack --mode development --module-bind "css=style-loader!css-loader"
cnpm i css-loader style-loader --save-dev
五、配置webpack.config.js
创建对象进行配置
moudule.exports={
//entry...
}
entry:入口
字符串:单输入
数组,多输入,打包到一块
对象表示(hash),多页面入口
entry : {//入口
html_1:'./src/html_1/index.js',/*第一个页面入口*/
html_2:['./src/html_2/index.js','./src/html_2/index2.js'],/*第二个页面入口*/
app:'./src/app.js',/*应用入口*/
vendors:'./src/vendors.js',/*第三方入口*/
}
output:输出
单入口,单出口,固定 output:{filename:'index.js',path:'/dist/js'}
多入口,多出口,name或者hash(MD5或者版本号,唯一性)
publicPath 占位符,上线的时候设置服务器地址
output:{
filename:'[name].js',/*文件名,或者filename:'[name]-[hash].js'*/
path:__dirname + '/dist/js'/*文件路径*/,
publicPath:""
}
如果是node方式,输出路径如下
const path = require("path")
output:{path:path.resolve(__dirname,"./dist/js/bundle.js")};
//path.resolve()方法解析了当前路径,将相对路径改为绝对路径
plugin插件,解决loader解决不了的事情
引用前安装 npm install html-webpack-plugin --save-dev
配置引用 var htmlWebpackPlugin = require('html-webpack-plugin');
plugins:[
new webpack.optimize.UglifyJsPlugin(),
new HtmlWebpackPlugin({template: './src/index.html'})
]
loader 让webpack处理非js的文件,因为webpack只理解js
两个目标:
- .test : 需要被转化的文件类型
- .use : 转化时用哪一个loader
所有loader都有exclude和include属性,设置不打包和打包范围
module:{
rules:[
{
test:/\.js$/,
exclude:/node_modules/,//exclude设置那些不需要用babel-lader,include表示需要用
loader:"babel-loader"
}
]
}
预配置操作preset,设置如何处理js
- rules 中加入:
query:{presets:['latest']}
- 根目录创建.babelrc
{"presets":["env"]}
- package.json加入
"babel":{"presets":["latest"]}
babel补充:
在配置文件中配置,暗转babel,转换es6
先安装loadercnpm i babel-loader
安装终端工具cnpm install -g babel-cli
安装转换插件cnpm i babel-preset-env --save-dev
转换命令demobabel es6.js --presets es2015
配置.babelrc文件{"presets":["env"]}
或者"babel": {"presets": ["es2015"]}
具体babel的参考,官方说明文档吧
如果需要重新指定配置文件
//webpack --config 文件名
webpack --config webpack.config2.js
六、定义执行脚本
在package.json中设置,package.json中要用双引号,要不要是编译器报错
"scripts": {
"webpack":"webpack --mode development --config webpack.config.js --progress --display-modules --colors --display-reason",
"server":"webpack-dev-server --mode development --output-public-path dist"
},
然后命令行敲cnpm run server