-
处理less文件中引入postcss-loader顺序， less> postcss>css>style查看全部
-
当要把所有@import引入的css文件也进行postcss-loader处理时，需要加上importLoaders=1， 这个因为loader仅仅为postcss-loader所以为1查看全部
-
postcss可以放在module之后表示postcss需要引入的依赖查看全部
-
webpack的三种用法 1.直接命令行使用。 2.node.js API的使用方式。 3.webpack —config webpack.config.js 一、entry 1、三种输入方式 （1）string，输入字符串 entry:{ main:'./src/script/main.js' }, （2）array, 数组。适用情况：两个平行的，不相依赖的文件打包在一起。 entry:{ main:['./src/script/main.js','./src/script/a.js'] }, （3）object, 适用情况：多页面应用程序。这里要和output里的[name]占位符配合使用，威力才能最大。如果你要打包成多个js文件，那么entry对象里的key叫做chunk就是文件名，里面的值就是需要打包的文件里面包含的文件。 entry:{ main:'./src/script/main.js', a:'./src/script/a.js' }, 二、output 1、占位符有3种：[name]、[hash]、[chunkhash] 2、output的filename （1）hash: 这次打包的hash 每次终端运行webpack命令，都会生成一段信息，这段信息的第一行就有一个hash （2）chunkhash:每一个chunk自己的hash 3、output的path，//这里配置的是输出的文件地址查看全部
-
output中可以设置线上文件的文件名查看全部
-
引入公用的js，在body中引入自己的js文件查看全部
-
获取到不带publicPath的文件名称.source()可以获取到js的实际内容查看全部
-
一 配置文件 ① 配置文件是默认的文件名（webpack.config.js） 1. 在文件的根目录下创建webpack.config.js文件 2. 配置参数 var path = require('path'); module.exports = { entry:'./src/script/main.js',//打包的入口 output:{ path: path.resolve(__dirname, 'dist/js'),//打包后的存放路径 （绝对路径） filename:'bundle.js'//打包后的文件名 } } 3. 在命令行 中运行：webpack ② 配置文件不是默认的文件名 1. 比如配置文件的文件名为webpack.dev.config.js 2. 在命令行中运行时：webpack --config webpack.dev.config.js 二 设置webpack参数 1. 在npm脚本文件package.json文件中设置 2. 在scripts中添加："webpack":"webpack --config webpack.config.js --progress --display-modules --colors --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查看全部
-
多页面应用 自动生成html查看全部
-
webpack.config.js配置文件查看全部
-
这一章没什么卵用查看全部
-
本章节主要内容： 流程： 1.初始化，自动创建package.json npm init 2、在本项目中安装Webpack作为依赖包 npm install webpack --save-dev 3、打包，打包js为自定义的hello.js(js文件自定义，2-3步骤之间需要自己写页面逻辑)，自动会生成一个hello.bundle.js文件 webpack hello.js hello.bundle.js 4、html页面引入hello.bundle.js 中间要点： 1、其他js文件处理 hell.js里require("./xx.js") 2、css文件处理 a、需要先命令行安装css的loader npm install css-loader style-loader --save-dev b、在hello.js里require("style-loader!css-loader!./style.css") 3、避免在require css大量指定loader，直接通过命令行来指定相应的loader webpack hello.js hello.bundle.js --module-bind "css=style-loader!css-loader" 4、避免每次输入打包等命令行，直接通过命名行来监听变动并自动打包 webpack hello.js hello.bundle.js --module-bind "css=style-loader!css-loader" --watch 备注：webpack hello.js hello.bundle.js --watch 此命令没指定css loader，需require的时候指定 其他命令行 1、查看打包的模块 webpack hello.js hello.bundle.js --display-moudles //查看打包的模块 2、查看打包的进度 webpack hello.js hello.bundle.js --progress 3、命令行里终止该次命令 ctrl+c查看全部
-
mkdir webpack-test cd webpack-test npm init npm install webpack webpack hello.js hello.bundle.js查看全部
举报
0/150
提交
取消