webpack4打包一个项目的基本步骤

webpack4打包一个项目的基本步骤

首先创建一个目录,例如demo,之后在命令提示行中进入该目录:
进行初始化:

npm init

安装webpack:

npm install webpack --save-dev

安装webpack-cli:

npm install webpack-cli --save-dev

安装webpack-dev-server:

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

在demo目录下新建一个webpack.config.js,初始化它的内容:

var config={

};

module.exports=config;

在package.json的scripts中增加一个快速启动webpack-dev-server服务的脚本:

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server --open --config webpack.config.js"
  },

在demo目录下新建一个空的main.js作为入口文件,之后在webpack.config.js中进行配置:

var path = require('path');
var config = {
    mode:"development",
    entry: {
        main: "./main"
    },
    output: {
        path:path.join(__dirname,'./dist'),
        publicPath:'/dist/',
        filename:'main.js'
    }
};

module.exports = config;

打包后的文件会存储为demo/dist/main.js,可以在html中引用它。
在demo目录下,新建一个index.html作为SPA的入口:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>webpack</title>
</head>
<body>
<div id="app">
    Hello Webpack!
</div>
<script src="/dist/main.js"></script></body>
</html>

在终端执行下面的命令,会在浏览器中自动打开页面:

npm run dev

对css进行处理,安装style-loader和css-loader:

npm install css-loader --save-dev
npm install style-loader --save-dev

对webpack.config.js进行配置:

var path = require('path');
var config = {
    mode:"development",
    entry: {
        main: "./main"
    },
    output: {
        path:path.join(__dirname,'./dist'),
        publicPath:'/dist/',
        filename:'main.js'
    },
    module:{
        rules:[
            {
                test:/\.css$/,
                use:[
                    'style-loader',
                    'css-loader'
                ]
            }
        ]
    }
};

module.exports = config;

在demo目录下新建一个style.css文件:

#app{
    color:red;
}

在main.js中导入style.css:

import './style.css'

执行npm run dev命令,可以发现字体变成了红色。
将css提取出来,安装extract-text-webpack-plugin:

npm install extract-text-webpack-plugin@next --save-dev

在webpack.config.js中配置插件:

var path = require('path');
var ExtractTextPlugin = require('extract-text-webpack-plugin');

var config = {
    mode: "development",
    entry: {
        main: "./main"
    },
    output: {
        path: path.join(__dirname, './dist'),
        publicPath: '/dist/',
        filename: 'main.js'
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: ExtractTextPlugin.extract({
                    use: 'css-loader',
                    fallback: 'style-loader'
                })
            }
        ]
    },
    //重命名提取后的文件
    plugins:[
        new ExtractTextPlugin("main.css")
    ]
};

index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>webpack</title>
    <link rel="stylesheet" type="text/css" href="/dist/main.css" >
</head>
<body>
<div id="app">
    Hello Webpack!
</div>
<script src="/dist/main.js"></script></body>
</html>

可以用以下命令中的一个进行打包:

webpack --mode development
webpack --mode production
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值