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.jsconst 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
网友评论