webpack简单运用(构建html 安装插件和loader)

目录

webpack是什么?

webpack配置步骤

安装loader

安装插件  

打包

webpack是什么?
 在webpack的世界里,每个文件都是一个模块,比如.css、.js、.html等。对于不同的模块，则需要不同的加载器(Loaders)来处理。

提示:下面的操作都默认你安装了node.js，如果没有请看 node.js安装步骤

webpack配置步骤
1.创建一个目录 比如 demo

使用 NPM初始化

$ npm init

2. 本地局部安装 webpack与webpack-dev-server

$ npm install webpack --save-dev

**: --save-dev 会作为开发依赖来安装

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

如果你的 package.json 的devDependencies包含 webpack和server则表示安装成功。如果你的webpack版本大于4.0.0 则需要安装webpack-cli 最后目录如下:

     "devDependencies": {
        "webpack": "^4.21.0",
        "webpack-cli": "^3.1.2",
        "webpack-dev-server": "^3.1.9"
      }
3.在 demo目录里  创建 webpack.config.js
4. 打开 package.json 在"scripts" 加入一个服务脚本

 "dev":"webpack-dev-server --open --config webpack.config.js"

**: --open 表示会自动打开浏览器 --config是 则会直接读取webpack.config.js文件
5. 在demo目录下 创建 main.js,并打开 webpack.config.js进行如下配置:

    var path=require('path');
 
    var config={
        entry:{
            main:'./main'
        },
        output:{
            path:path.join(__dirname,'./dist'),
            publicPath:'/dist/',
            filename:'main.js'
        }
    };
    module.exports=config;
6. 在demo目录下 创建 index.html

    

        你好! 世界
    

    
7.启动webpack

   $ npm run dev

安装loader
1.安装css处理的加载器

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

2. 打开webpack配置文件,添加如下内容

        module:{
            rules:[
                {
                    test:/\.css$/,
                    use:["style-loader","css-loader"]
                }
            ]
        }
 **: module对象的 rules属性可以指定一系列的Loaders。每一个loader都必须包含test和use两个选项

3.在项目根目录 创建 style.css文件

#app{
    font-size: 20px;
    color:orange;
}
4.引入main.js

import './style.css';
 5. 重新启动服务

$ npm run dev

安装插件  
有时候因为css文件内容太多,都引入js文件里太占体积，而且不能做缓存，此时我们就需要用插件来将散落的css提取到一个main.css文件里，最终将该文件导入index.html中

1. 安装 extract-text-webpack.plugin
        提示: 如果webpack版本大于4.0.0则需要@next

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

2. 打开webpack配置文件,配置如下:

var path=require('path');
var ExtractTextPlugin=require('extract-text-webpack-plugin');
var config={
    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:[
        //重命名提取后的css文件
        new ExtractTextPlugin('main.css')
    ]
};
module.exports=config;
 3. 重新启动服务

$ npm run dev

打包
   1.在 package.json中“”scripts” 添加如下内容:

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

$ npm run build 

如果想了解es6语法转换点击这里:es6语法转es5

后面关于vue-cli的相关配置还会更新...
--------------------- 
作者：平常心_c 
来源：CSDN 
原文：https://blog.csdn.net/qq_37674616/article/details/83240495 
版权声明：本文为博主原创文章，转载请附上博文链接！