-
--progress -dispaly-modules //列出打包模块查看全部
-
--progress //查看打包过程查看全部
-
--watch //文件更新时自动打包查看全部
-
webpack hello.js hello.bundle.js --module-bind 'css=style-loader!css-loader' //绑定css的loader查看全部
-
webpack -g //查看webpack命令查看全部
-
npm install css-loader style-loader -save-dev //下载用于适配css文件的loader查看全部
-
npm install webpack --save-dev //下载webpack查看全部
-
npm init // 在项目中引导创建一个package.json文件 安装包的信息可保持到项目的package.json文件中，以便后续的其它的项目开发或者他人合作使用，也说package.json在项目中是必不可少的。查看全部
-
mkdir //新建文件夹查看全部
-
var htmlWebpackPlugin = require('html-webpack-plugin') var path = require('path') module.exports = { entry: { main: './src/app.js' }, output: { path: path.resolve(__dirname + "/dist"), filename: 'js/[name].bundle.js', }, module: { rules: [{ test: /\.css$/, use: ["style-loader", "css-loader", "postcss-loader"] }, { test: /\.less$/, use: ["style-loader", "css-loader", "postcss-loader", "less-loader"] }, { test: /\.js$/, include: path.resolve(__dirname, 'src'), exclude: path.resolve(__dirname, 'node_modules') }] }, plugins: [ new htmlWebpackPlugin({ template: 'index.html', filename: 'index.html', inject: 'body', }), require('autoprefixer') ] } http://www.imooc.com/qadetail/212602查看全部
-
一、layer.html是模板文件 1、处理模板文件的做法：（1）webpack将模板文件当做一个字符串进行处理。（2）webpack将模板文件当成已经编译好的的模板的处理函数。 对js模板语法，模板引擎，模板的作用的认识和了解再来看这章会比较容易理解。 二、要支持html文件，安装html-loader 终端目标文件输入：npm install html-loader --save-dev 三、要支持.ejs文件或者是.tpl文件，安装ejs 终端目标文件输入：npm install ejs-loader --save-dev layer.js载入ejs模板时，返回的是一个function，这时的import tpl from './layer.tpl';中的tpl代表的不再是字符串，表示的是一个已经编译过的函数 四、react——jsx vue——jsx查看全部
-
一、less-loader 1、安装： 终端目标文件输入：npm i less-loader --save-dev 错误提示：npm WARN less-loader@4.0.3 requires a peer of less@^2.3.1 but none was installed. 说明less没有装 2、安装less 终端目标文件输入：npm i less --save-dev 二、less-loader 基本配置是 loader: ‘style-lander!css-loader!postcss-loader!less-loader’ 三、sass-loader 1、安装 终端目标文件输入：npm i sass-loader --save-dev 出现错误提示： npm WARN sass-loader@6.0.3 requires a peer of node-sass@^4.0.0 but none was installed. 说明需要安装node-sass，解决方法： 终端目标文件输入：npm i node-sass -g --save-dev查看全部
-
//webpack2.0 解决style-loader!css-loader!post-loader问题,并解决css中@import的问题： { test:/\.css$/, use:[ 'style-loader', {loader:'css-loader',options:{importLoaders:1}}, { loader:'postcss-loader', options:{ plugins:function(){ return [ require('postcss-import')(), //一定要写在require("autoprefixer")前面，否则require("autoprefixer")无效 require("autoprefixer")({browsers:['last 5 versions']}) ] } } } ] }查看全部
-
2.5.1官网最新文档总结： 1.安装方法 npm install babel-loader babel-core babel-preset-env webpack --save-dev 2.所以后面的参数'由presets: ['latest']相对于的变成了presets: ['env'] 3.官方并没有废弃query 也没有指明options是新参数 实际测试两种方法都可以 生成结果也一模一样 4.loader: 'babel-loader'才能被识别 5.include和exclude需要相对路径，所以include:__dirname +'./src/' 加前缀__dirname查看全部
-
一、babel 1、babel是一个转换编译器,它能将ES6转换成可以在浏览器中运行的代码 2、安装babel 终端目标文件夹输入：npm install --save-dev babel-loader babel-core 3、loader:'babel-loader'可以正常运行，视频中的loader:'babel'不能正常运行。 4、babel的loader是一个非常耗时的转换。 改善之前的时间是8260ms 二、query: ['kwɪərɪ]查询 presets:[priː'sets] 三、安装plugin的latest 终端目标文件输入：npm install --save-dev babel-preset-latest 四、改善： （1）webpack 的api的configuration loaders的参数5个：test,exclude,include,loader,loaders （2）改善方法：exclude,include参数 例如：exclude:'./node_modules/',//node_modules是已经引用过的，已经打包过的文件，其实这里对速度没有影响，这是告诉你如果是不相关的文件，可以用exclude include:'./src/', 1）会报错：-configuration.module.loaders[0].exclude: The provided value "./node_modules/" is not an absolute path! 2）报错的解决方法： exclude:__dirname+'/node_modules/',//已经引用过的，已经打包过的文件 include:__dirname+'/src/', （3）这样初步改善后时间是1210ms 五、给loader指定参数presets 1、直接Loader后跟问号 require('url-loader?mimetype=images/png!./file.png'); 2、配置文件中跟问号 3、配置文件中用query 4、项目根目录建立babelrc配置文件，配置文件中一个对象，对象中参数为presets. 5、config.js中指定babel，babel指定presets.查看全部
举报
0/150
提交
取消