1、基本文件目录
2、初始化
npm init -y
3、安装jquery
npm install jquery -s
-s是写入dependencies,即生产环境
4、在main.js中导入jquery,并编写jquery代码
import $ from 'jquery'
$(function (){
$('li:odd').css('backgroundColor','blue');
$('li:even').css('backgroundColor','yellow');
})
5、用webpack打包
webpack ./src/main.js ./dist/bundle.js
源文件路径 目标文件路径
6、改写webpack.config.js文件,简化打包步骤
const path = require('path');
module.exports = {
entry : path.join(__dirname, './src/main.js'),
output : {
path : path.join(__dirname, './dist'),
filename : 'bundle.js'
}
}
此时webpack ./src/main.js ./dist/bundle.js命令被简化为webpack
7、使用webpack-dev-server工具,实现自动打包编译的功能
运行 npm i webpack-dev-server -D 将工具安装到本地,即开发依赖
在package.json中的scripts中添加,第二行是我们添加的内容,后面的参数是--open自动打开浏览器--port 3000配置端口(默认是8080)--contentBase src 打开服务器后要展示的页面路径
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack-dev-server --open --port 3000 --contentBase src"
}
在本地安装webpack npm i webpack@4.0.0 -D
在本地安装webpack-cli npm i webpack-cli -D
npm run dev 运行
8、引入bundle.js
所有的文件都被打包进bundle.js,所以需要在页面引入bundle.js
在使用webpack-dev-server之前,引入路径为配置文件中的/dist/bundle.js
在使用npm run dev后,引入路径为根目录下的/bundle.jswebpack-dev-server帮我们打包生成的bundle.js并没有存放到实际的物理磁盘中,而是托管到了电脑的内存中,所以我们在项目的根目录中找不到这个打包好的bundle.js.
此时并没有大功告成,如果直接右键openInBrowser会发现控制台虽然编译成功了但是网页。并没有刷新,那是因为webpack-dev-server把我们的项目托管到一个服务器了
可以看到服务器地址是http://localhost:8080/ 而输出文件在根目录下,
ctrl + 点击地址就能在浏览器打开项目,这时候更新项目后,网页就能实时更新了
9、html-webpack-plugin插件
他是用来为html引入外部资源文件的,比如script 动态添加每次编译后的hash(给文件名添加hash字符,这样每次编译后生成的文件都是不同的,就不会引用缓存文件了),防止引用缓存的外部文件
npm i install html-webpack-plugin -D
然后在webpack.config.js中进行配置
const htmlWebpackPlugin = path.require('html-webpack-plugin');
module.exports = {
plugins : [
new htmlWebpackPlugin({
template : path.join('__dirname, './src/index.html/),//指定模板页面,将来会跟据制定的路径去生成内存中的页面
filename : 'index.html' //生成页面的名称
})
]
}
10、引入.css .less .csss文件
需要用到css-loader styte-loader less-loader sass-loader node-sass这几个插件
这即个插件用来自动引入.css .less .scss文件,less-loader 依赖于less, sass-loader依赖于node-sass
npm i css-loader style-loader less-loader less sass-loader node-sass -D
下载后在webpack.config.js中进行配置
module : {
rules : [//用于匹配所有第三方模块,加载器
{test : /\.css$/, use : ['style-loader', 'css-loader']},//从右到左调用,.css的匹配规则
{test : /\.less$/, use : ['style-loader', 'css-loader', 'less-loader']},//.less的匹配规则
{test : /\.scss$/, use : ['style-loader', 'css-loader', 'sass-loader']}//.sass的匹配规则
]
}
在main.js中导入
import './css/index.css'
import './css/index.less'
import './css/index.scss'
11、在样式文件中引入url
默认情况下webpack无法引入css中url,需要通过url-loader来实现,url-loader依赖于file-loader
npm i url-loader file-loader -D
在webpack.config.js中进行配置
module : {
rules : [
{test : /\.(gif|png|jpg)$/, use : 'url-loader'}
]
}
12、使webpack完全支持ES6
由于webpack只支持部分ES6语法,所以还要通过插件来解决这个问题(插件按到吐???)
babel-core、babel-loader、babel-plugin-transform-runtime、babel-preset-env、babel-preset-stage-0
注意版本兼容,是个坑?
在根目录新建一个文件 .babelrc 在 .babelrc中配置
{
"presets" : ["env","stage-0"],
"plugins" :["transform-runtime"]
}
配置webpack.config.js
module : {
rules : [
{test : /\.js$/, use : 'babel-loader', exclude : /node_modules/}//不转换node_modules中的js文件,只转换自己写的js
]
}
https://www.cnblogs.com/Richard-Tang/p/9875607.html
注意:package.json中不允许有注释
webpack-dev-server的一些配置https://blog.csdn.net/franktaoge/article/details/80083317
html-webpack-plugin的一个配置https://segmentfault.com/a/1190000013883242?utm_source=tag-newest