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

    <div id="app">
        你好! 世界
    </div>
    <script src="/dist/main.js"></script>

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的相关配置还会更新...