webpack4打包实践

全局安装webpack

npm install -g webpack

创建项目

mkdir webpack-test
cd webpack-test
npm init

npm init后会在根目录下生成一个名为package.json的文件,文件中srcipts字段设置如下:

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack --mode development",
    "build": "webpack --mode production"
  },

这样就可以直接使用命令npm run build来进行文件打包

项目内安装webpack

(注意切换镜像源)

cnpm install -D webpack-cli

安装需要的依赖

cnpm install --save-dev webpack css-loader style-loader url-loader babel babel-core babel-loader babel-preset-es2015 html-webpack-plugin

配置babel

根目录下新建.bablerc文件写入如下内容:

{"presets":["es2015"]}

新建webpack.config.js

在根目录下新建webpack.config.js文件,写入如下内容:

const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack');
const config = {
    module: {
        rules: [
            //将相互依赖的模块打包到一个文件
            {test: /\.css$/, loader: ['style-loader', 'css-loader']},
            {test: /\.js$/, loader: 'babel-loader'}
        ]
    },
    plugins: [
        //dist中创建index.html文件并自动引用相关的文件(如 css, js)
        new HtmlWebpackPlugin({template: './src/index.html'})
    ]
};
module.exports = config;

这里使用webpack4默认的入口和出口,所以并没有设置entry、output

创建测试文件

根目录下新建src文件夹,并创建如下文件:
index.html文件:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>test</title>
    </head>
    <body>
        <div class="test"></div>
    </body>
</html>

创建css文件夹并新建index.css文件:

.test{margin: 0 auto;width: 100px;height: 100px;background: #ff6700}

创建index.js文件引入index.css:

require('../src/css/index.css');
console.log('text')

执行打包

执行npm run build即可在根目录下生成dist打包目录,目录包含index.html main.js两个文件

demo地址:https://github.com/qianxiaoduan/webpack-test

发表评论

您的电子邮箱地址不会被公开。