webpack搭建项目

最新推荐文章于 2023-05-03 15:23:02 发布

吴莉

最新推荐文章于 2023-05-03 15:23:02 发布

阅读量137

点赞数

分类专栏： webpack

本文链接：https://blog.csdn.net/kgcwuli/article/details/97170132

版权

webpack 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

基础篇

1.新建一个文件，在当前目录下执行

npm init

然后一直回车：
在这里插入图片描述
可以发现，当前目录下多了一个 package.json 的文件，文件里面自动生成以下代码：

{
  "name": "demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

至此，项目初始化完成

2.执行

npm install

会发现当前目录下多了一个node_modules

3.安装项目依赖

npm install webpack -g
npm install webpack --save-dev

4.新建一个文件 webpack.config.js，之后的配置基本都写在这个文件中。

现在，我们在目录下新建一个 src 文件夹，存放我们开发所需要的页面，src下面建立 page1目录，表示 page1 页面， page2 同理。

page1 下面的 index.html 如下:
在这里插入图片描述
项目目录结构如下：

接下来，我们想分别以这两个页面为入口文件进行打包

为了使webpack启动方便，我们在package.json 中写以下代码：

"webpack": "webpack --config webpack.config.js --progress --display-modules --colors --display-reason"

如下图：
在这里插入图片描述
然后在webpack.config.js中写以下代码：

const HtmlWebpackPlugin = require('html-webpack-plugin');  //引入插件，不可漏掉！！！
module.exports = {
    entry: {
        page1 : __dirname + '/src/page1/index.js',// page1的入口文件，webpack是以js为入口文件的
        page2 : __dirname + '/src/page2/index.js',
    },
    output : {
        path : __dirname + '/dist',//产出路径，一般放在dist目录下
        filename:'js/[name]-[chunkhash].js',
        //把为入口文件放在dist目录的js文件夹下，
        //name是文件名，chunkhash是每次打包文件的hash值，
        //目的是如果哪个文件修改，chunkhash会改变，可以只上线修改过的文件
        // publicPath: 'http://cdn.com/' //如果上线，可以改为线上地址
    },
 
    plugins: [
        new HtmlWebpackPlugin({
            filename : 'page1.html',//入口html
            template : './src/page1/index.html',
            minify : {
                // removeComments:true,   //删除注释
                // collapseWhitespace: true      //删除空格，压缩
            },
            chunks: ['page1']  //对应entry的入口js.这样可以按需加载js
        }),
        new HtmlWebpackPlugin({
            filename : 'page2.html',
            template : './src/page2/index.html',
            minify : {
                // removeComments:true,   //删除注释
                // collapseWhitespace: true      //删除空格，压缩
            },
            chunks: ['page2']
        }),
    ],
}

然后安装相应的插件

npm install webpack-cli -g
npm install webpack-cli --save-dev
npm install html-webpack-plugin --save-dev

在命令窗口运行 npm run webpack 可以看到文件在进行打包，dist目录下生成的文件
在这里插入图片描述
至此，初步打包基本完成~

我们看一下生成的文件
在这里插入图片描述
这里的 page1 只引用了 page1 的 js，这是因为我们配置 HtmlWebpackPlugin 的时候为其加了 chunks，我们的代码里面也写了备注，大家可留意学习。

应用篇——配置本地启动的服务器localhost，处理scss，css，图片等资源

我们知道文件可以打包成功后，接下来配置启动本地服务器，这样就可以在文件做出修改的时候页面自动刷新，不需要每次修改都重新打包编译了。
配置本地服务器
1.在 package.json 下面配置如下代

"start": "node_modules/.bin/webpack-dev-server",
 "dev": "webpack --mode development"

放在以下位置：
在这里插入图片描述
2. 在 webpack.config.js 引入 path

const path = require('path');

在 webpack.config.js 配置 devServer

  devServer: { 
        host : '127.0.0.1', 
        port : 8088 ,
        inline : true,
        open :true,   //自动打开浏览器
        hot : false,   //慎用！打开热更新，会导致修改样式可能不支持。关闭热更新，页面会强刷
        contentBase : path.join(__dirname, "dist"),
    },

完整代码
在这里插入图片描述
运行方式：

首先，运行

npm run dev

然后，运行

npm run start

可以看到浏览器自动帮我们打开了页面
在这里插入图片描述
然后修改代码保存，就会发现浏览器自动刷新了修改的内容。

例如，现在打开 page1.html 如下：
在这里插入图片描述
此时，保存发现浏览器自动更新到了我们要的效果。

注意：此时修改 html 文件和 js 文件都生效了，但是 css 还没生效，这是因为我们还没写处理 css 的插件。另外，修改 webpack.config.js 文件和 package.json 需要重新执行 npm run start

处理CSS,SCSS文件类型
至此，html，css，js 只有 css 还没生效，我们来看怎么处理 css 文件

1.分别建立 css 文件和 scss 文件，我们还是以 page1 为例
在这里插入图片描述
然后，在 index.css 下面给 body 添加背景颜色：

body{
    background-color:red;
}

在 test.scss 问价下写如下样式：

body {
    margin: 50px;
    div {
        display: flex;
    }
}

上面讲过，webpack 的入口文件是 js,所以在 index.js 引入这两个 css 文件
2. 在 index.js 引入这两个 css 文件
在这里插入图片描述
3. 配置 webpack.config.js

 module: {
        rules: [
            { test: /\.(css|scss)$/,
                   
                    use: [
                    {loader : "style-loader"},
                    {loader : 'css-loader?importLoaders=2',
                        options: {
                            minimize: true //css压缩
                        }
                    },
                    { loader : 'postcss-loader',
                        options: {
                            plugins:function(){
                                return [
                                    require('autoprefixer')({
                                        browsers: ["last 5 versions"]
                                    }), //添加浏览器前缀
                                ];
                            }
                        }
                    },
                { loader : "sass-loader", }],
            exclude: /node_modules/
        },
    ],
},

还是给大家看一下放的位置
在这里插入图片描述
红色框标记的是用到的插件，一个一个安装：


npm install --save-dev css-loader style-loader
 
npm install sass-loader node-sass --save-dev
 
npm install postcss-cli autoprefixer

如果无法运行，请参考这里

const HtmlWebpackPlugin = require('html-webpack-plugin');  //引入插件，不可漏掉！！！
const path = require('path');
module.exports = {
    entry: {
        page1 : __dirname + '/src/page1/index.js',// page1的入口文件，webpack是以js为入口文件的
        page2 : __dirname + '/src/page2/index.js',
    },
    output : {
        path : __dirname + '/dist',//产出路径，一般放在dist目录下
        filename:'js/[name]-[chunkhash].js',
        //把为入口文件放在dist目录的js文件夹下，
        //name是文件名，chunkhash是每次打包文件的hash值，
        //目的是如果哪个文件修改，chunkhash会改变，可以只上线修改过的文件
        // publicPath: 'http://cdn.com/' //如果上线，可以改为线上地址
    },
    devServer: {
        host : '127.0.0.1',
        port : 8088 ,
        inline : true,
        open :true,   //自动打开浏览器
        hot : false,   //慎用！打开热更新，会导致修改样式可能不支持。关闭热更新，页面会强刷
        contentBase : path.join(__dirname, "dist"),
    },
    module: {
        rules: [
            { test: /\.(css|scss)$/,
                use: [
                    {loader : "style-loader"},
                    {loader : 'css-loader?importLoaders=true',
                        // options: {
                        //     minimize: true //css压缩
                        // }
                    },
                    { loader : 'postcss-loader',
                        options: {
                        plugins: [
                            require("autoprefixer") /*在这里添加*/
                        ]
						}
                    },
                    { loader : "sass-loader" }
                ],
                exclude: /node_modules/
            },
        ],
    },
	resolve: {
        extensions: ['*', '.js', '.jsx', '.json'],
      },
    plugins: [
        new HtmlWebpackPlugin({
            filename : 'page1.html',//入口html
            template : './src/page1/index.html',
            minify : {
                // removeComments:true,   //删除注释
                // collapseWhitespace: true      //删除空格，压缩
            },
            chunks: ['page1']  //对应entry的入口js.这样可以按需加载js
        }),
        new HtmlWebpackPlugin({
            filename : 'page2.html',
            template : './src/page2/index.html',
            minify : {
                // removeComments:true,   //删除注释
                // collapseWhitespace: true      //删除空格，压缩
            },
            chunks: ['page2']
        }),
    ],
}

简单讲一下，postcss 是预处理，其中 autoprefixer 是自动添加浏览器前缀，比如我们的 test.scss 文件里面写了

display:flex

会自动转化为：
在这里插入图片描述
scss-loader 顾名思义，就是把 scss 转化为 css

写在处理 css 资源的同级

注意：在html 引用图片使用以下方式

<img src="${require('../img/jd.png')}" alt="">

安装插件

npm install image-webpack-loader
 
npm install url-loader

其中， url-loader 和 file-loader 的区别代码可参考代码注释

吴莉

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
webpack搭建项目

基础篇1.新建一个文件，在当前目录下执行npm init然后一直回车：可以发现，当前目录下多了一个 package.json 的文件，文件里面自动生成以下代码：{ "name": "demo", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "...
复制链接

扫一扫

专栏目录