Webpack入门初体验

基础文件配置

在安装webpack之前你需要先安装Node.js

  • node -v可以查看当前安装的node版本
  • 要想使用webpack指令，先用npm install webpack webpack-cli --save-dev指令进行全局安装
  • 当前项目安装webpack npm install webpack webpack-cli --save-dev（yarn add webpack webpack-cli -D），webpack从4开始，webpack本身和cli就分离开了
  • webpack的三种使用方式：
    1.npx webpack
    2.node_modules/.bin/webpack
    3.在package.json的scripts添加"build":"node_modules/.bin/webpack"，然后执行npm run build命令

1.创建一个目录，并且切换到目录下面
mkdir webpack-demo && cd webpack-demo
2.npm初始化并本地安装webpack
下面这个指令会在本地生成一个package.json的文件
npm init -y
然后执行npm install webpack --save-dev安装webpack开发依赖。
3.在webpack-demo目录下创建对应的目录和文件
src目录用来存放源文件mkdir src && cd src
创建一个个入口文件index.jstouch index.js
创建3个模块touch moudel1.js module2.js module3.js
4.index.js文件内容

import module_1 from './module1'
import module_2 from './module2'
import module_3 from './module3'
module_1()
module_2()
module_3()

5.module1.js文件内容


export default function module_1() {
console.log("这是module_1模块")
}

6.module2.js文件内容

export default function module_2() {
console.log("这是module_2模块")
}

7.module3.js文件内容

export default function module_3() {
console.log("这是module_3模块")
}

8.现在，需要返回到项目的根目录，也就是webpack-demo目录下，新建一个配置文件
touch webpack.config.js
9.在webpack.config.js中写配置内容
在项目的根目录下创建一个dist文件，作为配置的输出路径，app.js是webpack打包运行后自动生成的

const path = require('path')
// 导入处理路径的模块
module.exports = {
    // 导出一个配置对象，将来webpack在启动的时候，会默认来查找webpack.config.js，并读取这个文件中导出的配置对象，来进行打包处理
    entry: './src/index.js',    // 项目入口文件
    output: {   // 配置输出选项
        path: path.resolve(__dirname, 'dist'),  // 配置输出的路径，当前的位置为__dirname，拼接上dist，形成一个绝对路径，然后再拼上下面的filename，形成项目的输出文件
        filename: 'my-first-webpack-bundle.js'   //配置输出的文件名
    }
}

10.找到根目录下package.json文件，在script后的对象中，添加内容

"dev": "./node_modules/.bin/webpack"

11.npm run dev

mode设置

当我们在项目中最初使用npm run build的时候，命令行工具中会警告我们没有设置mode，所以会自动使用production模式，所以我们可以在webpack的配置文件webpack.config.js中设置modemode:'production'或者是development，正常情况下，development打包出来的文件会大很多。
mode的使用场景：
比如我们在某个js文件中设置以下代码

if (process.env.NODE_ENV  === 'development') {
    console.log('base is localhost')
}else{
    console.log('base is imoccom')
}

根据webpack的配置文件中mode的设置，会打包出来上面的js语句中对应的代码

使用html-webpack-plugin插件配置启动页面

这个插件就是帮我们自动生成html文件并且自动引入打包好的js文件

  1. 运行npm i html-webpack-plugin --save安装到开发依赖
  2. 修改webpack.config.js配置文件如下：
    // 导入处理路径的模块
    var path = require('path');
    // 导入自动生成HTMl文件的插件
    var htmlWebpackPlugin = require('html-webpack-plugin');
    module.exports = {
        entry: './src/index.js',
        output: { 
            path: path.resolve(__dirname, 'dist'),
            filename: 'my-first-webpack.bundle.js' 
        },
        plugins:[ // 添加plugins节点配置插件
            new htmlWebpackPlugin({
                //在这个插件内部，可以指定模版和自定义生成的文件名
                template:'src/index.html',
                //加了template选项，就会在这个模板的基础上把打包好的js文件加入到这里面中
                filename:'main.html'//自动生成的HTML文件的名称
            })
        ]
    }

有了上面两个配置后，这个插件帮助生成一个main.html，并且是基于template:'src/index.html'生成的

配置webapck支持babel

yarn add babel-loader @babel/core @babel/preset-env @babel/plgun-transform-runtime -D
yarn add @babel/runtime -S

@babel/runtime的安装只是为了支持本地开发的运行环境，所以使用-S进行安装就可以了。
接下来是修改配置文件.babelrc

{
    "presets": [
        "@babel/preset-env"
    ],
    "plugins": [
        "@babel/plugin-transform-runtime"
    ]
}

接下来去webpack.config.js文件的module的rules中添加规则

module:{
    rules:[
        {
            test: '/\.js$/',
            loader: 'babel-loader'
        }   
    ]
}

这样的话，再次打包运行，会发现刚才安装的babel应用成功了
接下来掩饰安装一个插件，用来复制静态文件进制定的位置
yarn add clean-webpack-plugin copy-webpack-plugin -D
在webpack.config.js文件中添加如下代码：

const { CleanWebpackPlugin }  = require('clean-webpack-plugin')
const { CopyWebpackPlugin }  = require('copy-webpack-plugin')

在plugins中去new一下

new CleanWebpackPlugin()
new CopyWebpackPlugin([{
    from:'path.join(__dirname,'assets')',
    to:'assets'
}])

然后npm run build就可以自动当前项目的assets文件夹直接放到dist中去了

使用webpack-dev-server插件实现实时打包构建

webpack自带了webpack --watch指令，如果
webpack-dev-server插件提供了一个简单的 web 服务器，并且能够实时重新加载(live reloading)。
1.安装webpack-dev-server

npm install webpack-dev-server --save-dev

增加package.json配置文件如下：

"start": "webpack-dev-server",

在终端运行命令：

npm start

这个命令是利用了webpack-dev-server将项目打包到内存中，而npm run dev是将项目打包到dist文件夹中，项目上线时直接把dist中的文件部署到服务器中就可以，打包到内存中的好处是可以实现实时更新。
命令启动后，就可通过浏览器的对应接口对项目进行预览。
2.让webpack自动给我们打开服务器地址
在webpack.config.js中添加配置

devServer:{
    open: true
}

其中open:true 表示自动打开浏览器
3.修改服务器端口
在webpack.config.js中添加配置项目

devServer:{
    open: true,
    port: 8090
}

其中port后面给了个自定义端口
4.设置默认访问目录，如果不设置访问目录，则系统会默认访问项目根目录

devServer:{
    open: true,
    port: 8090,
    contentBase: './dist'
}

零配置使用webpack4.x

1.安装webpack
webpack的安装方式可以分为全局安装和局部安装，全局安装需要加 -g

 npm install webpack -g

不过这种方式并不推荐，我们需要直接安装在项目本地, 注意：webpack4.x版本安装需要安装webpack-cli
进入到自己的项目目录，我这里项目目录为webpack-demo, 进入到目录，执行命令，npm init 初始化项目
webpack-cli@3.1.2

npm install webpack  webpack-cli -D

2.简单打包实例
在项目目录下新建src目录，在src目录下分别建立index.js 和 module_a.js文件
index.js里的内容

let a = require("./module_a")
console.log(a)

module_a.js里的内容

module.exports = "hello world！！！"

3.运行打包

npx webpack
//可以添加上生产模式
npx webpack --mode development

npx是npm里内置的一个包执行器，需要npm 版本5.2.0以上支持，因此，请查看版本号是否支持
用npx都不用在webpack.config.js添加dev配置了
webpack4中mode分三种：“-- production(生产环境)”,"--development(开发环境)","--none(不使用前两个默认的配置)"，上面的每一种模式都对应着一种配置。
在实际开发过程中可以设置mode来在我们自定义配置的基础上 加上 mode提供给我们的配置。
打包后在dist目录下会生成一个main.js的文件

使用webpack自定义配置

在项目目录下新建 webpack.config.js, webpack是基于node的 遵循commonjs规范，在配置文件中需要使用module.exports导出内容，配置文件主要包括以下几个模块

module.exports = {
    //入口配置
    entry: '',
    //出口配置
    output: '',
    //模块配置
    module: {},
    //插件配置
    plugins: {},
    //模式配置，开发模式还是生产模式
    mode:'',
    //开发服务器配置
    devServer: {},
    //解析配置
    resolve: {}
}

简单配置：

const path = require("path")
module.exports = {
    entry: "./src/index.js",
    output: {
        path: path.resolve(__dirname, "dist"),
        filename: "bundle.js"
    },
    module: {
        rules: [
            {
                test: /\.css/,
                use: ["style-loader", "css-loader"]
            },
            {
                test: /\.(jpg|png|gif|bmp)/,
                use: [
                    loader: "url-loader",
                    options: {
                        limit: 10240
                    }
                ]
            }
        ]
    }
}
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容