webpack基本配置、模块、插件

作者: 苹果咏 | 来源:发表于2020-02-17 22:44 被阅读0次

webpack基本配置、模块、插件
webpack常用plugin
webpack 优化
webpack源码阅读解析笔记
Vue.config.js各个属性说明
webpack4.0 resolve的使用
webpack
webpack 4.0 基础配置
9、webpack多页应用
2018-06-10 zn社笔记四

1、项目初始化，安装依赖

npm init -y
npm install

-y是所有默认都选yes

webpack4两个包要分别安装

npm install webpack  --g
npm install webpack-cli  --g

webpack4打包方法

webpack ./src/main.js -o ./dist/bundle.js --mode development

2、用webpack命令直接打包

先新建webpack.config.js文件，配置好出入口目录就可以

module.exports = {
    //入口路径
    entry: path.join(__dirname, './src/main.js'),  //打包哪个文件
    output: {
        path: path.join(__dirname, './dist'),  //输出目录
        filename: 'bundle.js'
    }
}

3、全自动编译，安装webpack-dev-server

npm i webpack-dev-server -D

因为安装在本地，所以无法直接运行webpack-dev-server，要在package.json中加入

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server --open --port 3000 --contentBase src --hot"
  },

这样运行npm run dev就能直接运行webpack-dev-server，open是自动打开浏览器，port设置端口号，contentBase设置src为根目录，hot局部刷新，不刷新整个JS文件，不刷新加载页面
这个生成的js没有存在磁盘上，所以引用的js要写成根目录
--open 自动打开浏览器
--port 3000 指定端口3000
--contentBase src 内容的根路径
--hot 热重载，热更新。打补丁，实现浏览器的无刷新

要将缓存存在硬盘上，要安装

npm i html-webpack-plugin -D

webpack.config.js

const path = require('path')

const htmlWebpackPlugin = require('html-webpack-plugin')

// webpack配置文件
module.exports = {
    //入口路径
    entry: path.join(__dirname, './src/main.js'),  //打包哪个文件
    output: {
        path: path.join(__dirname, './dist'),  //输出目录
        filename: 'bundle.js'
    },
    plugins: [
        new htmlWebpackPlugin({   //创建一个在内存中生成HTML页面的插件
            template: path.join(__dirname, './src/index.html'), //指定模板页面
            filename: 'index.html'
        })
    ]
}

这样主页不用写引用js的路径，插件已经自动引用

4、加载CSS文件

安装

npm i style-loader css-loader -D

webpack.config.js的配置文件中追加

module: {  //用于配置所有第三方模块加载器
        rules: [
            { test: /\.css$/, use:['style-loader', 'css-loader'] }  //匹配.css结尾的文件,使用这两个插件处理，先调用右边的loader
        ]
    }

再在main.js中引用css

import './css/index.css'

5、文件处理规则

webpack看到js中的文件处理不了，就会去webpack.config.js找配置规则，先调用右边的

6、处理less和scss文件

安装

npm i less -D
npm i less-loader -D
npm i sass -D
npm i sass-loader -D

webpack.config.js的配置文件中追加

module: {  //用于配置所有第三方模块加载器
        rules: [
            { test: /\.css$/, use:['style-loader', 'css-loader'] },  //匹配.css结尾的文件,使用这两个插件处理
            { test: /\.less$/, use:['style-loader', 'css-loader','less-loader'] },
            { test: /\.scss$/, use:['style-loader', 'css-loader','sass-loader'] }
        ]
    }

7、处理图片路径的loader

npm i url-loader file-loader -D

{ test: /\.(jpg|png|gif|bmp|jpeg)$/, use: 'url-loader?limit=7632&name=[hash:8]-[name].[ext]' }// 处理图片路径的loader，小于7632字节的进行base64编码，name保留原文件名，加入哈希值防止命名重复

引入bootstrap图标无法显示问题
https://www.cnblogs.com/ZaraNet/p/10255965.html

8、处理Vue文件

npm i vue -S
npm i vue-loader vue-template-compiler -D

main.js

import login from "./login.vue"

webpack.config.js

const path = require('path')
const htmlWebpackPlugin = require('html-webpack-plugin')
const VueLoaderPlugin = require('vue-loader/lib/plugin');

// webpack配置文件
module.exports = {
    //入口路径
    entry: path.join(__dirname, './src/main.js'),  //打包哪个文件
    output: {
        path: path.join(__dirname, './dist'),  //输出目录
        filename: 'bundle.js'
    },
    plugins: [ //配置插件的节点
        new htmlWebpackPlugin({   //创建一个在内存中生成HTML页面的插件
            template: path.join(__dirname, './src/index.html'), //指定模板页面
            filename: 'index.html'
        }),
        new VueLoaderPlugin()
    ],
    module: {  //用于配置所有第三方模块加载器
        rules: [
            { test: /\.css$/, use: ['style-loader', 'css-loader'] },  //匹配.css结尾的文件,使用这两个插件处理
            { test: /\.less$/, use: ['style-loader', 'css-loader','less-loader'] },
            { test: /\.scss$/, use: ['style-loader', 'css-loader','sass-loader'] },
            { test: /\.(jpg|png|gif|bmp|jpeg)$/, use: 'url-loader?limit=7632&name=[hash:8]-[name].[ext]' },// 处理图片路径的loader
            { test: /\.(ttf|eot|svg|woff|woff2|otf)$/, use: 'url-loader' }, //处理字体文件
            { test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ }, //配置babel转换ES6语法
            { test: /\.vue$/, use: 'vue-loader' }
        ]
    }
}

9、mode模式

module.exports = {
  mode: 'development'   //开发模式
};

//等价于
// webpack.development.config.js
module.exports = {
+ mode: 'development'
- plugins: [
-   new webpack.NamedModulesPlugin(),
-   new webpack.DefinePlugin({ "process.env.NODE_ENV": JSON.stringify("development") }),
- ]
}

module.exports = {
  mode: 'production'   //生产模式
};

//等价于
// webpack.production.config.js
module.exports = {
+  mode: 'production',
-  plugins: [
-    new UglifyJsPlugin(/* ... */),
-    new webpack.DefinePlugin({ "process.env.NODE_ENV": JSON.stringify("production") }),
-    new webpack.optimize.ModuleConcatenationPlugin(),
-    new webpack.NoEmitOnErrorsPlugin()
-  ]
}

不同模式打包出来的代码大小不同，按照实际情况打包
webpack打包命令为webpack，可在package.json中加上：

    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "dev": "webpack-dev-server --open --port 3000 --contentBase src --hot",
        "start": "webpack "
    },