webpack打包

最新推荐文章于 2024-04-27 08:39:59 发布

青青子衿越

最新推荐文章于 2024-04-27 08:39:59 发布

阅读量324

点赞数

文章标签： webpack 前端 javascript

本文链接：https://blog.csdn.net/qq_46376192/article/details/128250271

版权

创建文件夹目录

src

1、src/index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>div变颜色</title>
    <script src="../dist/bundle.js"></script>
</head>
<body>
    <div></div>
</body>
</html>

2、src/index.js

import $ from 'jquery';

$(function(){
    $('div').css({
        width:'200px',
        height:'200px',
        background:'red'
    });
})

3、webpack.config.js

var path = require('path');

module.exports = {
    mode:'development',
    entry:path.resolve(__dirname,'./src/index.js'),
    output:{
        path:path.resolve(__dirname,'./dist'),
        filename:'bundle.js'
    }
}

webpack命令：

1，初始化npm npm init -y

（2，）安装jquery PS \12、webpack\12_02、webpack02\ npm install jquery

2，本地安装webpack npm install webpack --save-dev

3, npm install webpack-cli --save-dev

实现修改js源码，就可以自动打包，实现webpack的实时重新加载(live reloading)

4，webpack.config.js

var path = require('path');

module.exports = {
   # mode:'development',
    entry:path.resolve(__dirname,'./src/index.js'),
    output:{
        path:path.resolve(__dirname,'./dist'),
        filename:'bundle.js'
    }
}

5，运行npm install webpack-dev-server --save-dev安装到开发依赖

6，此时需要借助于package.json文件中的指令，来进行运行webpack-dev-server命令，在scripts节点下新增"dev": "webpack-dev-server"指令

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
   # "dev": "webpack-dev-server"
  },

7，不引入dist里面的js,直接引入内存中的js

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- <script src="../dist/bundle.js"></script> -->
    <!-- 直接引入内存当中的bundle.js -->
    <script src="./bundle.js"></script>
</head>
<body>
    <div></div>
</body>
</html>

实现自动打开浏览器

8，修改webpack.config.js文件，新增devServer节点如下：

const path = require('path');
module.exports = {

    entry:path.resolve(__dirname,'./src/index.js'),
    output:{
        path:path.resolve(__dirname,'./dist'),
        filename:'bundle.js'
    },
    //新增`devServer`节点如下：
 #   devServer:{
        open:true,
    },

}

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

9，运行npm i html-webpack-plugin --save-dev安装到开发依赖

10，修改webpack.config.js配置文件如下：

const path = require('path');

// 导入自动生成HTMl文件的插件
# var htmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {

    entry:path.resolve(__dirname,'./src/index.js'),
    output:{
        path:path.resolve(__dirname,'./dist'),
        filename:'bundle.js'
    },
    devServer:{
        open:true,
    },
   # // 配置plugins
 plugins:[ // 添加plugins节点配置插件
            new htmlWebpackPlugin({
                template:path.resolve(__dirname, 'src/index.html'),//模板路径，即我们自己的html文件
                filename:'index.html'//自动生成的HTML文件的名称
            })
        ]
}

11，启动服务根目录下：npm run dev

使用webpack打包css文件

1，在index.js中，把css作为模块引入

import $ from 'jquery';

import './index.css';//把css作为模块引入

$(function(){
    $('div').css({
        height:'200px',
        width:'200px',
        background:'skyblue'
    })
})

2，运行npm i style-loader css-loader --save-dev

3，修改webpack.config.js这个配置文件：

var path = require('path');
var htmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    mode: 'development',
    entry: path.resolve(__dirname, './src/index.js'),
    output: {
        path: path.resolve(__dirname, './dist'),
        filename: 'bundle.js'
    },
    plugins: [ // 添加plugins节点配置插件
        new htmlWebpackPlugin({
            template: path.resolve(__dirname, 'src/index.html'),//模板路径，即我们自己的html文件
            filename: 'index.html'//自动生成的HTML文件的名称
        })
    ],
    devServer: {
        open: true,
    },
    #//配置文件：
    module: { // 用来配置第三方loader模块的
        rules: [ // 文件的匹配规则
            { test: /\.css$/, use: ['style-loader', 'css-loader'] }//处理css文件的规则
        ]
    }
}

npm run dev 重新运行，发现css样式已经引入

使用webpack打包less文件

1,在index.js中引入less

import $ from 'jquery';
import './index.css';

import './demo.less';//引入less

$(function(){
    $('div').css({
        height:'200px',
        width:'200px',
        background:'skyblue'
    })
})

2,运行npm i less-loader less --save-dev

3,修改webpack.config.js这个配置文件：

var path = require('path');
var htmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    mode: 'development',
    entry: path.resolve(__dirname, './src/index.js'),
    output: {
        path: path.resolve(__dirname, './dist'),
        filename: 'bundle.js'
    },
    plugins: [ // 添加plugins节点配置插件
        new htmlWebpackPlugin({
            template: path.resolve(__dirname, 'src/index.html'),//模板路径，即我们自己的html文件
            filename: 'index.html'//自动生成的HTML文件的名称
        })
    ],
    devServer: {
        open: true,
    },
        #//配置文件：
    module: { // 用来配置第三方loader模块的
        rules: [ // 文件的匹配规则
            { test: /\.css$/, use: ['style-loader', 'css-loader'] },//处理css文件的规则
           # { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },
        ]
    }
}

npm run dev

使用webpack打包sass文件

运行npm i sass-loader node-sass --save-dev
在webpack.config.js中添加处理sass文件的loader模块：

{ test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] }