1. 初始化一个空项目
创建一个空文件夹
mkdir webpack-test
进入这个文件夹
cd webpack-test
-
创建如下所示的文件夹以及文件
3.1 src文件夹
3.1.1 css文件夹:用来存放css样式文件
3.1.2 images文件夹:用来存放图片
3.1.3 index.html:我们能够看到的主页面
3.1.4 main.js:js打包入口文件
-
添加一个package.json文件
npm init -y
-
在index.html里面随便写一个代码
<div>hahhaha</div>
-
并且加上这一段代码的样式,在css文件下面,新建一个index.css文件,以及images文件夹里面添加一个要用到的图片
div{ background: url('../images/wallpaper.png'); background-size: cover; font-size: large; height: 500px; width: 500px; }
-
新建一个文件
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' }
设置我们的入口文件是main.js文件,当我们打包后,我们的出口文件是dist文件夹下面的bundle.js。
-
添加jquery的依赖
yarn add jquery
为什么要用yarn而不用npm?
yarn和npm都是可以用的,但是yarn下载要快一点。
-
在main.js文件里面,引入jquery,并且简单的操作一下
import $ from 'jquery' $(function () { $('div').css('color','pink') })
-
此刻我想要运行我的项目了,我该怎么运行呢?
-
安装webpack
yarn add webpack --dev
-
安装webpack-dev-server 以及 html-webpack-plugin
yarn add webpack-dev-server html-webpack-plugin --dev
-
在package.json里面设置一下dev环境下面webpack server开始项目,以及我们的端口号,热加载
"dev": "webpack-dev-server --open --port 3000 --hot",
-
配置完毕,我们运行项目的命令就是:
npm run dev
-
-
但是,这个时候,还没有到开启项目的时候。我们之前安装了html-webpack-plugin,这个插件的用处就是让我们项目开启的时候第一眼能看见我们的index.html文件,而不是我们的项目目录。所以,打开webpack.config.js配置:
plugins: [ new htmlWebpackPlugin({ template: path.join(__dirname, './src/index.html'), filename: 'index.html' // 默认会打开index。html这个首页 }) ],
-
我们现在可以尝试开启项目,但是会失败哦!因为我们运用了css,url但是没有配置他们的加载器。要在webpack.config.js配置加载器:
module: { rules: [ {test: /\.css$/, use:['style-loader','css-loader']}, {test:/\.scss$/,use:['style-loader','css-loader','sass-loader']}, {test:/\.(png|gif|bmp|jpg)$/,use:['url-loader?limit=5000']}, ]
并且安装他们的加载器:
yarn add style-loader css-loader sass-loader node-sass url-loader file-loader --dev
-
如果我们想要运行es6的高级语法呢?
-
安装babel
yarn add babel-core babel-loader babel-plugin-transform-runtime babel-preset-env babel-preset-stage-0 --dev
-
新建.babelrc文件
{ "presets": ["env","stage-0"], "plugins": ["transform-runtime"] }
-
配置babel的加载器
{test:/\.js$/,use:'babel-loader',exclude:/node_modules/}
-
起项目!
好了,现在我们准备发布了!发布环境与我们的开发环境是不一样的哦,发布环境要复杂的多。所以,我们先复制一下webpack.config.js文件改名为webpack.pub.config.js。
-
在package.json文件下面配置一个发布,告诉程序,发布的配置文件是webpack.pub.config.js。
"pub": "webpack --config webpack.pub.config.js"
-
发布的命令是:
npm run pub
当我们发布的时候,会生成了一个dist文件夹,文件夹里们有我们的bundle.js以及图片等。
-
此刻,我们决定把打包好了的图片都放到一个images文件夹里面,在webpack.pub.config.js里面配置:
test: /\.(png|gif|bmp|jpg)$/, use: ['url-loader?limit=5000&' + 'name=images/[hash:8]-[name].[ext]']
-
重新运行
npm run pub
我们就重新打包发布了,我们发现dist文件下面出现了一个images文件夹,我们的图片也在images文件夹下面,但是,之前dist目录下班的图片依旧遗留在此,没有处理掉。于是,我想要每次打包发布的时候都先删除dist文件,再重新生成一个。-
安装插件
yarn add clean-webpack-plugin --dev
-
在webpack.pub.config.js里面配置,告诉插件我们删除的文件夹是哪个
const CleanWebpackPlugin = require('clean-webpack-plugin'); plugins: [ ..., new CleanWebpackPlugin(['dist']) ]
-
npm run pub
-
此刻我们可以优化一下我们的项目,压缩一下。
mini-css-extract-plugin
-
安装插件(注意:踩坑!)
yarn add extract-text-webpack-plugin --dev
为什么踩坑?因为我的webpack4以上已经不用这个插件了,我们有更好的插件来替代:
yarn add mini-css-extract-plugin --dev
-
配置(压缩css,并且放在css文件夹下面)
const MiniCssExtractPlugin = require("mini-css-extract-plugin"); plugins: [ new MiniCssExtractPlugin({ filename: "css/[name].css", chunkFilename: "css/[id].css" }) ], rules: [ { test: /\.css$/, use: [ { loader: MiniCssExtractPlugin.loader, options: { publicPath: '../' } }, "css-loader" ] }, ]
publicPath: '../'
的作用就是:当我们打包发布了之后,因为我们的图片是在一个images文件夹下面,所以图片的相对地址就相对于默认情况下的相对地址,改变了。那么我们就需要配置一下相对地址。 -
压缩(html压缩)
plugins: [ new htmlWebpackPlugin({ template: path.join(__dirname, './src/index.html'), filename: 'index.html', minify: {//压缩html文件 collapseWhitespace: true,//移除空格 removeComments: true,//移除注释 removeAttributeQuotes: true//移除属性上的双引号 } }),
-
-
如何在打包的时候,把我们的代码与我们所依赖的包相分离,把依赖的东西提取出来呢?配置:
entry: { app: path.join(__dirname, './src/main.js'), vendors1: ['jquery']//把要抽离的第三方的包的报名,放入这个数组里面 }, optimization: { splitChunks: { cacheGroups: { commons: { name: "vendors1", filename: "js/vendors.js", chunks: "initial", minChunks: 2 } } } }
把我们需要排斥的依赖,设置在entry里面,
dist文件夹下面vendors.js就是我们所排除的依赖。
npm run pub