用网站源码做网站,app程序开发用什么编程,微信运营商是哪个公司,做网站需要什么cailiao一直以来使用webpack都是用的别人的配置#xff0c;这几天自己学习了一下。 项目地址#xff1a;https://github.com/donghaohao... 新建整个工程 npm init安装依赖#xff0c;这里我们开发vue项目#xff0c;npm install vue --save#xff0c;然后是开发时的依赖npm ins… 一直以来使用webpack都是用的别人的配置这几天自己学习了一下。 项目地址https://github.com/donghaohao... 新建整个工程 npm init安装依赖这里我们开发vue项目npm install vue --save然后是开发时的依赖npm install --save-dev这里有个重点是写package.json里面的scripts因为我们要分开发环境和生产环境。开发环境使用webpack-dev-server热替换生产环境需要压缩加hash等。使用npm run dev 或 npm run build 就可以运行下面的脚本。 dev: webpack-dev-server --inline --hot --compress --history-api-fallback --config webpack.dev.config.js,build: webpack --progress --hide-modules --config webpack.prod.config.js 配置 这里分为三个webpack.base.config.js webpack.dev.config.js webpack.prod.config.js entry设置入口文件可以设置多个就会打包成多个vendors是我们如果引用了vuejQuery等就不会把这些和代码打包到一起会另外生成vendor.js。 entry: {main: ./src/index.js,vendors: [vue]
}, 输出目录这里path是最后打包完的输出目录publicPath是server上的目录这个自行设置好路径。我们在开发模式的时候并不会输出到目录的。 webpack主要就是各种loader这个可以参考我的github上的需要解释的有两点一是使用vue-loader时因为需要使用postcss所以下面需要这样写 vue: {autoprefixer: false,postcss: [nested(),cssnext({ browsers: [last 2 versions, Android 2.1, iOS 7.0] }),flexFallback(),],}, 二个就是使用url-loader时它会自动在图片后面加hash强迫症患者表示不行我们在开发模式下不加生产模式下加。 // 开发模式
config.module.loaders.push({test: /\.(gif|jpg|png|jpeg|svg)\??.*$/, loader: url-loader?name[name].[ext]limit8192
}); // 生产模式
config.module.loaders.push({test: /\.(gif|jpg|png|jpeg|svg)\??.*$/, loader: url-loader?limit8192
}); preLoaders 就是提前处理这里我们使用了eslint需要检查书写规范然后添加 .eslintrc 文件. resolveextensions就是你require的时候可以省略扩展名alias就是别名在require的时候直接使用别名避免写的太长。 resolve: {// 扩展require时省略扩展名extensions: [, .js, .vue],// 别名alias: {filter: path.join(__dirname, ./src/filters),components: path.join(__dirname, ./src/components)}} 插件 ExtractTextPlugin 提取CSS。HtmlWebpackPlugin 生产html这个可以自己生成也可以指定模板会将打包的js和css插入到html中这个有好多其他参数可自行搜索。webpack.optimize.CommonsChunkPlugin 这个为了抽取前面vendor里的第三方库打包成另外的文件。webpack.optimize.UglifyJsPlugin 压缩代码。生产模式CleanWebpackPlugin 这个是我最新发现的一个主要是在打包到dist之前先删除以前的dist因为加hash厚并不会覆盖。生产模式这里使用了ES6所以要配置一下.babelrc。增加项目文件 这里我只是增加了一些测试的项目文件开发和生产都正常如有需要可以自行添加其他目录。
