这个是工程链接 https://github.com/soGooday/canvasWF
前言
笔者为了学习webpack感觉也是走了不少的弯路。有很多点想知道,但是找不到。下面笔者就带着大家带着你快速的入门。
这篇文章的宗旨的-我先带着你搭建起来。等你能跑通了,再去看那这些参数是做什么的,我会把官方的链接放在需要使用到的代码下面
默认你已经安装好了node.js
下面我们先初始化一个node.js的环境
我们需要提前知道的是webpack是webpack node.js是node.js 我们第一步是创建一个node.js 跟webpack还没有关系。打开一个文件夹,crtl+鼠标右键->从此处打开命令窗口 然后我们在cmd上面输入下面的指令,初始化node.js的环境。为搭建webpack做基础
npm init -y
然后呢 你就会看下面的图片
安装webpack
然后呢我们开始安装webpack与webpack-cli的包
这一步我们才开始安装webpack的,之前并没有
怎么安装呢 还是在命令行下面输入下面内容
npm install webpack webpack-cli -D
然后你就会看到多出来的东西。这些东西,才使得我们真正的创建好了webpack的环境。
那我们如何使用webpack呢
跟我一起来。
在刚刚创建的文件甲里面创建一文件 src
然后在src里面创建一个index.js,因为src/index.js是webpack默认的开始打包的文件, 其实我们可以通过配置webpack.config.js来修改这个路径,但是这个我们后面再管。我们现在的第一要义就是让webPack跑起来
在index.js里面写一句话
console.log('你好呀,我是来测试的');
好像我刚刚有人叫我说等下你,你遇见了使用上面的指令出现了 webpack不可见指令的报错 就是下面的这附图,为了模拟的神东,你就把a当做是webpack
不过没有关系,我带你去处理
安装下面的指令 我们全局安装就会处理掉这个问题
然后我们在根目录下,再次打开刚刚我们输入指令的地方。是的就是把刚刚的-D换成可-g
npm install webpack webpack-cli -g
这样的话 你是不是就没有问题啦。什么你问我为什么会这样。等你看完下面这位大大写的文章,我想你就明白了
https://blog.csdn.net/weixin_44135121/article/details/90513634
打包&启动
我们输入如下的指令
webpack --mode=development
是不是看到了下面的平旷,恭喜你,已经学会了使用webpack进行打打包了,
配置package.json
好了,如果你并不知道刚刚的指令是做什么的。不着急,搜索一下,你就会明白,但是我们并不知我们目的,目的是带你快速搭建起来webpack包
我们打开package.json文件是的就是下面这个
我们呢要写上几句话
因为这样我们就可以使用一些简单的指令了
"build:d": "webpack --mode=development --progress --color",
"build:p": "webpack --mode=production --progress --color",
"dev": "webpack-dev-server --inline --open"//这个是边写边测试而是用的
本地边写边看效果
下面我们就来看下怎么实现这个功能
还是刚刚cmd的命令行工具(根目录下) 输入如下的指令
npm install webpack-dev-server -D
成功之后
在cmd继续输入
npm install html-webpack-plugin -D
上面的啷个指令按钮的东西,在下面你会用得到哦
写一个这样为js文件
webpack.config.js
内容是
const HtmlWebpackPlugin = require('html-webpack-plugin')
const path = require('path');
module.exports = {
entry: {
app: './src/index.js',
},
output: {
filename: '[name].js',
path: __dirname + '/dist'
},
plugins:[
new HtmlWebpackPlugin(),
]
}
我知道你想问 这是干嘛的,我们先跑起来再说,上面的处理完毕,我们就要显示了
在刚刚的cmd指令框中打入 如下的指令
npm run dev
你就会看见
按住ctrl然后自动调取浏览器,但是你会看见空白的浏览器页面,没关系,打开开发者模式 谷歌浏览器默认是F12
是不是看见自己的刚刚写的话了。我下面还会继续写
index.htm模板
经过前面的探索,我猜你肯定会问,那我怎么定制自己的index.html。而不是生成压缩 index.js的这个入口文件。然后再生成
dist的文件下手动的创建index.html然后在手动的引入相应的脚本。
下面我们就学习如何完成这个需求。
在根目录下打开cmd。然后我们需要安装上html-webpack-plugin,这个npm 的包
npm install html-webpack-plugin -D
然后呢 我们就需要处配置的使用一下。webpack.config.js这个文件。
我们在根目录下创建一个文件名字加后缀=webpack.config.js
然后打开打开这个文件如下
下面书具体的内容
const HtmlWebpackPlugin = require('html-webpack-plugin') const path = require('path'); module.exports ={ entry: './src/index.js',//这个是我们的入口文件 output: { path: path.resolve(__dirname, 'dist'),//这个设置生成为文件放在那里 filename: 'bundle.js',//生成的js文件名字叫什么 }, plugins: [//插件 及的是 plugins 而不是 plugin new HtmlWebpackPlugin({ filename: 'index.html', // 配置输出文件名和路径 template: './src/index.html', // 配置文件模板-- }), ], }
上面就是这个这个具体的文件
其中的插件我们之使用到了 2个参数 分别是 模板路径 及其生成模板的名字
new HtmlWebpackPlugin({ filename: 'index.html', // 配置输出文件名和路径 template: './src/index.html', // 配置文件模板-- }),
下面就是模板的文件
此时的你 才一次使用 npm run build:d 你就会发现在disti下面生成了相关的两个文件
此时我们使用 npm run dev 进入到dist的目录下 我们就看到了
构建 CSS
我们需要使用两个两个 loader
- css-loader 负责解析 CSS 代码,主要是为了处理 CSS 中的依赖,例如
@import
和url()
等引用外部文件的声明; - style-loader 会将 css-loader 解析的结果转变成 JS 代码,运行时动态插入
style
标签来让 CSS 代码生效
npm install css-loader style-loader -D
经由上述两个 loader 的处理后,CSS 代码会转变为 JS,和 index.js 一起打包了。
然后我们在webpack.config.js里面添加下面的相关代码,这个意思就是如何使用我们上面的的两个loadier
module.exports = { //主要是下面的这些代码 module: { rules: [ // ... { test: /\.css/, include: [ path.resolve(__dirname, 'src'), ], use: [ 'style-loader', 'css-loader', ], }, ], } }
同时我们在src的目录下 创建一个文件 名字叫做index.css
然后在src的目录下的index.js 上面写上
import "./index.css"
这样就可以使用webpack咋打包的时候,会自动打包到然后的js文件中(因为单反是入口文件使用到的相关文件都会被webpack处理掉);
为了测试使用。我们在src的index.html的文件中
<body> <p>我是来测试css的引用的</p> </body>
然后我们使用 npm run dev我们就会看到如下界面
说明我们这一步CSS 预处理器 是成功了
CSS 预处理器
在上述使用 CSS 的基础上,通常我们会使用 Less/Sass 等 CSS 预处理器,webpack 可以通过添加对应的 loader 来支持,以使用 Less 为例,我们可以在官方文档中找到对应的 loader。
我们需要在上面的 webpack.config.js 配置中,添加一个配置来支持解析后缀为 .less 的文件:
我们需要安装上less
npm install less-loader -D
module.exports = {
// 主要部分 是下面的代码
module: {
rules: [
{
test: /\.less/,
include: [
path.resolve(__dirname, 'src'),
],
use: [
'style-loader',
'css-loader',
],
},
],
},
// ...
}
处理图片文件
在前端项目的样式中总会使用到图片,虽然我们已经提到 css-loader 会解析样式中用 url()
引用的文件路径,但是图片对应的 jpg/png/gif 等文件格式,webpack 处理不了。是的,我们只要添加一个处理图片的 loader 配置就可以了,现有的 file-loader 就是个不错的选择。
file-loader 可以用于处理很多类型的文件,它的主要作用是直接输出文件,把构建后的文件路径返回。配置很简单,在 rules
中添加一个字段,增加图片类型文件的解析配置:
老规矩,在根目录下我们先安装一下。下面的相关内容
npm install file-loader -D
在webpack.config.js中添加如下的内容
module.exports = {
// ...
module: {
rules: [
{
test: /\.(png|jpg|gif)$/,
use: [
{
loader: 'file-loader',
options: {},
},
],
},
],
},
}
使用 Babel
Babel 是一个让我们能够使用 ES 新特性的 JS 编译工具,我们可以在 webpack 中配置 Babel,以便使用 ES6、ES7 标准来编写 JS 代码。
具体的安装 看下这个网址
https://blog.csdn.net/weixin_44539392/article/details/86532913
安装一下 如下的包
npm i babel-core@6.26.3 npm i babel-loader@7.1.5 npm i babel-plugin-transform-runtime@6.23.0 npm i babel-preset-env@1.7.0 npm i babel-preset-stage-0@6.24.1
三.创建配置文件,在项目根目录下创建一个名为 “.babelrc” 的文件,注意该文件名前面有一个点,填写如下内容
{ "presets": ["env","stage-0"], "plugins": ["transform-runtime"] }
打开webpack.config.js配置文件(如果没有该文件你需要手动去创建,然后可以去webpack的官网找到相应的配置)填写如下配置
module: { rules: [ {test: /\.js$/,exclude: /(node_modules)/,use: "babel-loader"} ] } exclude这个必须加,如果不加的话在打包的时候会吧node_modules目录下的js文件也一起打包过去,这样的话会耗费电脑的资源,同时打包出来的文件也无法使用。
此内容来自 https://www.cnblogs.com/Richard-Tang/p/9875607.html 大佬的教程
webpack.config.js
下面有几个plugin是我自己添加的一些作用 比如压缩 copy图片及其自动清除dist目录
const HtmlWebpackPlugin = require('html-webpack-plugin') const CopyWebpackPlugin = require('copy-webpack-plugin') const { CleanWebpackPlugin } = require("clean-webpack-plugin"); const uglify = require('uglifyjs-webpack-plugin'); //js压缩插件 const path = require('path'); module.exports = { entry:'./src/index.js', output: { filename: 'index.js', path: __dirname + '/dist', // publicPath:'./src/' }, plugins:[ new HtmlWebpackPlugin({ filename: 'index.html', // 配置输出文件名和路径 template: './src/index.html', // 配置文件模板 }), new CleanWebpackPlugin(), new uglify( // {//js压缩插件 // cache: false,//启用文件缓存 // parallel: true,//使用多进程并行运行来提高构建速度 // sourcMap: true//使用源映射将错误消息位置映射到模块(这会减慢编译速度) // } ), new CopyWebpackPlugin([ { from: './src/images', to: './images', ignore: ['.*'] } ]) ], module: { rules: [ // 对css的解析 { test: /\.css/, include: [ path.resolve(__dirname, 'src'), ], use: [ 'style-loader', 'css-loader', ], }, { test: /\.(png|jpe?g|gif)$/i, use: [ { // loader: 'file-loader', loader: 'url-loader?limit=1024&name=./images/[name].[ext]'//这个会把你打出来的包 放在dist的image下面 }, ], }, {test: /\.js$/,exclude: /(node_modules)/,use: "babel-loader"}, // { // test: /\.css$/, // use: ["style-loader", "css-loader", "postcss-loader"] // }, // HTML中的图片 // { // test: /\.(htm|html)$/i, // use: ['html-withimg-loader'] // }, ], }, // resolve:{ // alias:{ // images: path.resolve(__dirname, 'src/images') // } // }, devServer: { //设置基本结构 // contentBase: path.resolve(__dirname, './dist'), contentBase: path.resolve(__dirname, './src/'),//这个很关键他是决定打开文件之后从那个页面座位主页面 host: 'localhost',//服务器IP地址,可以是localhost compress: true,//服务端压缩是否开启 open: true,// 自动打开浏览器 hot: true ,// 开启热更新 } }