-
npm install css-loader style-loader --save-dev查看全部
-
一、创建代码源文件目录：终端输入：mkdir src. 创建代码打包过以后的静态资源目录：终端输入：mkdir dist. 二、视频中的是webpack1，我安装的是webpack2。 视频中的webpack.config.js文件中的path，改成：path:path.resolve(__dirname,'./dist/js'), 然后在文件的第一行加上var path=require('path'); 三、如果是webpack.config.js改名字，改成webpack.dev.config.js 终端目标文件输入：webpack会失效 终端目标文件输入：webpack --config webpack.dev.config.js会生效 四、package.json中的scripts中写入webpack的参数后， 终端目标文件输入：npm run webpack查看全部
-
img-loader减小图片大小查看全部
-
url-loader将编码为base64嵌入html中查看全部
-
模板中引入图片地址方法查看全部
-
6、style-loader!cssloader!如果每个css文件都要写的话，就很麻烦，可以通过环境配置来避免这些重复的输入： （1）终端项目目录输入：webpack （2）终端项目目录输入：webpack hello.js hello.bundle.js --module-bind 'css=style-loader!css-loader' （aSuncat: css-loader后面不要加！,mac下是单引号''，windows是双引号""） 7、每次修改文件，都要重新输入命令，让文件自动更新，自动打包，可以用--watch的参数 （1）终端项目目录输入：webpack hello.js hello.bundle.js --module-bind 'css=style-loader!css-loader' --watch 8、打包过程的progress 终端输入：webpack hello.js hello.bundle.js --module-bind 'css=style-loader!css-loader' --progress 9、引用的模块 终端项目目录输入：webpack hello.js hello.bundle.js --module-bind 'css=style-loader!css-loader' --progress --display-modules 10、为什么打包模块的原因 终端项目目录输入：webpack hello.js hello.bundle.js --module-bind 'css=style-loader!css-loader' --progress --display-modules --display-reasons查看全部
-
一、webpack 1、安装: （1）进入指定目录 （2）新建文件夹：终端输入：mkdir webpack-test （3）进入文件夹：终端输入：cd webpack-test （4）文件夹下初始化npm：终端输入：npm init （5）全局装webpack:终端输入：npm install webpack -g （注：第一次运行webpack项目时，如果没有这一步，而直接执行下一步的话，会提示错误：webpack: command not found） （6）文件夹中装webpack:终端输入：npm install webpack --save-dev (参数-g的含义是代表安装到全局环境里面，参数--save-dev的含义是代表把你的安装包信息写入package.json文件的devDependencies字段中。) 2、项目操作 （1）用编辑器打开当前目录：终端输入：atom ./ （视频中老师用的编辑器是atom） （2）编辑器中：新建一个目录，命名为hello.js （3）webpack打包：终端输入：webpack hello.js hello.bundle.js（前面是要打包的文件名字，后面是打包后的文件名字） asset这次打包生成的文件，chunks这次打包的分块，chunk Names这次打包的块名称。 3、webpack支持的三种模块化方式：md，commonJs, es6. require(‘.world.js’)的写法是commonJs的 4、webpack天生不支持css类型的文件，如果要处理这种文件，就要依赖Loader. 5、安装loader （1）终端项目目录输入：npm install css-loader style-loader --save-dev （2）require('style-loader!css-loader!./style.css');表示引用文件之前，要引入loader查看全部
-
npm install --save-dev babel-preset-latest查看全部
-
一、webpack+react+es6 的组合非常常见。 二、webpack有个特性：代码分割，code-splitting。项目分割，在项目加载过程中只加载需要的文件。 三、按需加载。查看全部
-
loaders: [ { test: /\.js$/, exclude: /(node_modules|bower_components)/, include: /src/, loader: 'babel-loader', query: { presets: ['latest'] } } ]查看全部
-
webpack在GitHub上面是是一个很火的项目。webpack+React+ES6是是一个很火的组合。 code splitting代码分割、loader、clever parsing模块热更新、plugin system查看全部
-
html插件 npm install html-webpack-plugin 在webpack.config.js中引入并初始化查看全部
-
npm install html-webpack-plugin --save-dev查看全部
-
三个占位符来区别不同文件：1、name 2、hash 3、chunkhash hash和chunkhash的区别 hash：是每次打包的hash chunkhash: 每个模块自己的hash值，可以理解为版本号，也可理解为md5值（保证每个文件的唯一性）查看全部
-
关于entry有三种写法： 1：字符串string类型 2：数组array类型 3：多文件对象object类型查看全部
举报
0/150
提交
取消