webpack 安装与测试demo

1-我想安装到制定盘符E盘：cmd 中输入E：切换到E盘符



2-进入我指定目录下的某个文件夹下：cd E:\html\tools

3-新建webpack-test文件夹 ：输入mkdir webpack-test 

4-进入webpack-test 文件 ：cd webpack-test

5-初始化 ：npm init

6-安装webpack：npm install webpack  --save-dev

7-浏览新建的webpack-test文件下有什么？：dir ；

可以看到已经安装好的node-modules package.json

8-用命令行工具或是手动打开编辑器中的webpack-test 文件

9-新建hello.js



写测试代码

function hello (str) {
alert(str);

}





10-cmd 中输入webpack hello.js hello.bundle.js 回车 即打包好文件



11-安装loader ：npm install css-loader style-loader --save-dev

12-在hello.js中引入模块 

require('css-loader!./style.css') 虽然不报错 但是css 样式不会生效

13-需要引入style-loader，将style-loader!添加进去，style-loader的作用是新建一个<style>标签，并且将样式在style 标签中插入页面，：require('style-loader!css-loader!./style.css') ；

14-多个loader 引入很麻烦，也可以用命令行工具代替，此时需要hello.js

中仅仅引入require('./style.css') ，然后命令行输入:webpack hello.js hello.bundle.js --module-bind "css=style-loader!css-loader" 回车，样式同样可以引入页面